My figures are evenly spaced using flex spacing, but when I resize the window, they extend beyond the parent section.
Here is the HTML code snippet:
<section class="features">
<figure>
<img src="Images/Vanilla-Cupcakes.jpg" alt="Homemade Vanilla Cupcakes">
<figcaption>Homemade Cupcakes</figcaption>
</figure>
<figure>
<img src="Images/mini-cinnamon-rolls.jpg" alt="Sweet Cinnamon Rolls">
<figcaption>Cinnamon Rolls</figcaption>
</figure>
<figure>
<img src="Images/christmas-bread.jpg" alt="Christmas Sweat Bread">
<figcaption>Christmas Desserts</figcaption>
</figure>
</section>
And here is the CSS code part:
.features {
background: bisque;
color: white;
padding: 20px;
display: flex;
justify-content: center;
flex-direction: row;
}
.features figure {
color: white;
font-size: 30px;
text-align: center;
width: 350px;
}
.features figure img{
border-radius: 10px;
width: 350px;
}