I was just learning display: flex, so I’m trying to get used to it. The screenshot below was even before I removed the next content, now the last 2 items are not acting like the first row, don’t know why, tried what I know but still.
.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>
<div class="per">per dozen</div>
</div></div>
</div>
<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>
<div class="per">per dozen</div>
</div></div>
</div>
<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>
<div class="per">per dozen</div>
</div></div>
</div>
<!--last 3-->
<div class="mainmenu">
<!--Meat Kibbeh-->
<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>
<div class="per">per dozen</div>
</div></div>
</div>
<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>
<div class="per">per dozen</div>
</div></div>
</div>
<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>
<div class="per">per dozen</div>
</div></div>
</div>
The last two items were off from the position, if I add 3 items more, the last two were on the position.
>Solution :
Check your markup like David indicated in the comment.
Your first "mainmenu" div isn’t closed and there’s also no closing div for "menu".
<div class="menu">
<div class="mainmenu">
<!-- foodmenu -->
</div>
<div class="mainmenu">
<!-- foodmenu -->
</div>
</div>
Here’s a cleaned-up codepen. Your CSS is fine, just the markup needs a little fixing.