Beppe Beppe - 8 days ago 6
CSS Question

side by side Inline-block divs, last one aligned in the middle wrongly

I'm aligning responsive divs side by side vertically in pairs. I'm using inline-block instead of floats. I cannot use flex btw.
In the example below I have 5 divs, but the last one (div5) goes in the middle instead of aligning to the left. I cannot understand why.

Any suggestion?

What happening is:

div1 div2
div3 div4
div5

instead of:

div1 div2
div3 div4
div5


The CSS and HTML:

div-container{
margin: 0 auto;
width: 95%;
}

div{
display: inline-block;
width: 48%;
margin-right: 4%;
margin-bottom: 4%;
}

div:nth-child(2n+2) {
margin-right: 0;
}


<div class="div-container">
<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>

<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>

<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>

<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>

<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>

<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>

<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>

<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>

<div>
<div class="image-box">
<a href="#" title="tile">
<img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
</a>
</div>

<div class="content-box">
<div class="text-box">
<a href="#" title="card">
<h3>Hea</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
</div>
</div>
</div>
</div>

Answer

Try adding text-align: left; to div-container