Problem with flexbox

Hi guys,
I have a problem as you see on image.
I can solve it by putting width value but than it’s not responsive so I use max-width but now I have this.
I want all of them to be in one line :

<div class='bods'>
       
	<div class='sec'>
       <div><img class='bodyimg' src="https://png.icons8.com/material/40/FF8C00/gas.png" alt="fire"></div>
	   <div><h3>Premium Materials</h3>  Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
	   </div>
	</div>
	<div class='sec'>
       <div><img class='bodyimg' src="https://png.icons8.com/dotty/40/FF8C00/fiat-500.png" alt="car"></div>
    	<div><h3>Fast Shipping</h3>  We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
	   </div>
	</div>
	<div class='sec'>	
      	<div><img class='bodyimg' src="https://png.icons8.com/windows/40/FF8C00/full-battery.png" alt="battery"></div>
        <div> <h3>Quality Assurance</h3> For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
	    </div>
	</div>

and CSS :

.bods{
	display: flex;
	flex-direction: column;
	align-items: center;
  background-color:#EEEEEE;
}
.sec{
  background-color:#EEEEEE;
  max-width:920px;
  display:flex;
  flex-direction:row;
  align-items: center;
  font-size:16px;

solved with
width: 80vw to .sec