I've been struggling to get these images to wrap properly within my container. They keep overflowing beyond the designated width and I'm not sure if it's because I have paragraphs placed under each image. Any ideas on how to make 3 images appear in a row at the top, followed by 2 more right below with their titles centered beneath them?
Here's the CSS code snippet I've been using:
.block2 {
background-color: black;
width: 100%;
}
.pics {
display: flex;
}
.pics img {
height: 200px;
width: 300px;
margin: 20px;
flex-shrink: 0;
justify-content: center;
flex-wrap: wrap;
}
.pics p {
flex-wrap: wrap;
}And here is an example of the HTML structure:
<div class="block2">
<div class="text2">
<h2>Tea of the Month</h2>
<h1>What's Steeping at The Tea Cozy?</h1>
</div>
<div class="pics">
<img src="images/img-berryblitz.jpg" alt="berryblitz">
<p>Fall Berry Blitz Tea</p>
<img src="images/img-spiced-rum.jpg" alt="spicedrum">
<p>Spiced Rum Tea</p>
<img src="images/img-donut.jpg" alt="donut">
<p>Seasonal Donuts</p>
<img src="images/img-myrtle-ave.jpg" alt="myrtle">
<p>Myrtle Ave Tea</p>
<img src="images/img-bedford-bizarre.jpg" alt="bedford">
<p>Bedford Bizarre Tea</p>
</div>
</div>