My current issue involves images appearing in varying heights and the text underneath not aligning properly. Here is the markup: I have six row containers to showcase 6 different images.
<div class="row">
<div class="posts">
<img src="images/bond.jpg" alt="quantum of solace">
<h3 class="title">Quantum of Solace</h3>
<p class="post-info">PG13 | 106min</p>
</div>
</div>
To try and address this issue, I have set each post to occupy 14% of the width, with 2.5% margin on the right side. I attempted wrapping the image in a div element and setting it to overflow hidden, but unfortunately, that did not resolve the problem.
.row {
width: 100%;
}
.posts {
width: 14%;
float: left;
margin-right: 2.5%;
}
.posts img {
width: 100%;
max-width: 100%;
border-radius: 0.5em;
}