Div elements do not wrap on the next line - html

Question

I defined flexbox properties of container display: flex; flex-wrap: wrap; justify-content: center; but there are always 3 divs on the first row and 2 divs on the second. How to make it wrap divs when the browser resizes?
I tried almost everything (changed the width and height of parent container, changed width to min-width/max-width, set margin of parent container margin: 0 auto;).
<!-- HTML -->
<div class="parent">
<div class="headline">
<h2>Tea of the Month</h2>
<h4>What's Stepping at The Tea Cozy?</h4>
</div>
<div class="container">
<img src="..." class="image">
<p>Fall Berry Blitz Tea</p>
</div>
</div>
<div class="container">
<img src="..." class="image">
<p>Spiced Rum Tea</p>
</div>
</div>
<div class="container">
<img src="..." class="image">
<p>Seasonal Donuts</p>
</div>
</div>
<div class="container">
<img src="..." class="image">
<p>Myrtle Ave Tea</p>
</div>
</div>
<div class="container">
<img src="..." class="image">
<p>Bedford Bizarre Tea</p>
</div>
</div>
<!-- URL of images is correct -->
/* CSS */
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto;
}
.headline {
display: block;
width: 100%;
}
.container {
margin: 0px 10px;
}
.image {
width: 300px;
height: 200px;
}
I expect the divs would wrap on next line. But there always are 3 divs on first and 2 divs on second line.

Answer 1

Your HTML contained some invalid closure tags, please validate your HTML you can check out: https://validator.w3.org/
Also removed the fixed width of 1000px, you want to have a fluid parent so it sizes acording to the device or browser width.
/* CSS */
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
/* changed */
width: 100%;
}
.headline {
display: block;
width: 100%;
}
.container {
margin: 0px 10px;
}
.image {
width: 300px;
height: 200px;
}
<!-- HTML -->
<div class="parent">
<div class="headline">
<h2>Tea of the Month</h2>
<h4>What's Stepping at The Tea Cozy?</h4>
</div>
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Fall Berry Blitz Tea</p>
</div>
<!-- </div> REMOVED -->
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Spiced Rum Tea</p>
</div>
<!-- </div> REMOVED -->
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Seasonal Donuts</p>
</div>
<!-- </div> REMOVED -->
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Myrtle Ave Tea</p>
</div>
<!-- </div> REMOVED -->
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Bedford Bizarre Tea</p>
</div>
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Bedford Bizarre Tea</p>
</div>
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Bedford Bizarre Tea</p>
</div>
</div>

Answer 2

It happens because you set width:1000px on your .parent. This means that no matter the device size the parent will always be 1000px and there will always be 3 elements on the first row.
To solve this, set .parent {width: 100%; max-width: 1000px;}
cheers