I recently started learning about display: flex, and I'm still trying to get the hang of it. As you can see in the screenshot below, even after removing some content, the last two items are not behaving like the first row. I've tried different things but haven't been able to figure out why.
.menu {
text-align: center;
}
.mainmenu {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.foodmenu {
width: 30%;
margin-top: 40px;
text-align: center;
}
.foodmenu img {
height: 230px;
width: 230px;
border-radius: 50%;
max-width: 120px;
max-height: 120px;
margin-right: 10px;
}
.menutex {
display: flex;
align-items: center;
margin: 20px;
}
.menuh5 {
font: 1.2rem bold;
border-bottom: 1px dashed #222;
width: 200px;
text-align: left;
padding-bottom: 8px;
}
.menuh5 span {
color: orange;
float: right;
}
.per {
text-align: left;
margin-top: 4px;
}<div class="menu">
<div class="mainmenu">
<div class="foodmenu">
<div class="menutex">
<img src="https://d1ouk4tp1vcuss.cloudfront.net/s3.amazonaws.com/ODNUploads/645966bbdb7c8Meat_Kibbeh.jpg?mode=crop&v=1&width=250" />
</div>
<div>
<h5 class="menuh5">MEAT KIBBEH <span><b>$18</b></span></h5>
<div class="per">per dozen</div>
</div>
</div>
<!-- repeat this block for additional menu items -->
</div>https://i.sstatic.net/yBKK9.pngThe last two items seem to be misaligned, and upon adding three more items, they fall into place.