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;