CSS flex display on the second row doesn't set even

Issue

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.

Codepen

Answered By - carbonspace