Flexbox not aligned

Question

I want to create 6 boxes in the middle and display some features inside.

I am using display: inline-flex but for I can't get them to align properly, the last box seems out of the place. I don't want to use Bootstrap or any other framework but make this with pure CSS.

I am expecting to have aligned 6 boxes in the middle of centered div. This is what I have tried, example of snippet

.center {
  margin: auto;
  width: 80%;
  padding: 80px;
}

.flexi {
  display: inline-flex;
}

.jebote {
  border: 3px solid green;

}
.jebote5 {
  border: 3px solid green;

}

.jebote6 {
  border: 3px solid green;

}
.h1 {
}



  
    
    
    Custome Software Solutions
    
      Every business is unique and there is no “one-size-fits-all” when it
      comes to technology solutions that drive growth and stand you out in
      competitive market.
    
    
  
  
    
      
      
      Consulting and Strategy
      
        To develop efficient software and reduce the related costs, process
        and technology consulting are essential and integral part of every
        business strategy.
      
      
    
  
  
    
      
      
      Design and Creative Work
      
        Design plays a key role in engaging visitors and converting them
        into customers. We focus on creating memorable interactions through
        our designs.
      
    
  
  





  
    
    
    Mobile Applications
    
      We like to think of the problem the app intends to solve, analyze
      mobility context and create a mobile solution meeting that need and
      satisfying user experience.
    
  
  


  
    
      
      
      Website Development
      
        Professional, responsive, engaging and value driven web sites are
        true support to every business. They help engage the customers and
        gain an edge over the competitors.
      
    
  
  


  
    
      
      
      E-Commerce Development
      
        Building intuitive, useful, secure and accessible e-Commerce
        solutions that power the transactions and digital experience is
        important to us..

ramirozap · Accepted Answer

Here is another solution but using CSS Grid, the html was cleaned a bit.

The key part here is this line grid-template-columns: repeat(3, 1fr); it tells to the grid that we want 3 columns and each one should use the same space 1fr (1 fraction of the available space)

.center {
  margin: auto;
  width: 80%;
  padding: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.flexi {
  border: 3px solid green;
}

	

		
			
			Custome Software Solutions
			
				Every business is unique and there is no “one-size-fits-all” when it
				comes to technology solutions that drive growth and stand you out in
				competitive market.
			
		
		
			
			Consulting and Strategy
			
				To develop efficient software and reduce the related costs, process
				and technology consulting are essential and integral part of every
				business strategy.
			
		
		
			
			Design and Creative Work
			
				Design plays a key role in engaging visitors and converting them
				into customers. We focus on creating memorable interactions through
				our designs.
			
		

		

		
			
			Mobile Applications
			
				We like to think of the problem the app intends to solve, analyze
				mobility context and create a mobile solution meeting that need and
				satisfying user experience.
			
		


			
				
				Website Development
				
					Professional, responsive, engaging and value driven web sites are
					true support to every business. They help engage the customers and
					gain an edge over the competitors.
				
			

			
				
				E-Commerce Development
				
					Building intuitive, useful, secure and accessible e-Commerce
					solutions that power the transactions and digital experience is
					important to us..

Flexbox not aligned

Answers (2)

Related Questions