How do I get a column within a column?

Question

I am trying to get my CSS to look like this:

But so far I can only get it to look like this (still adding in font info and images):

How can I get it to look like it does in image 1? I am trying to use multiple columns but it's not working.

article {
  font-family: "alternate-gothic-no-1-d", sans-serif;
  width: 821px;
  height: 791px;
  margin-left: 94px;
  margin-top: 127px;
}
#menu {
  width: 665px;
  height: 772;
  column-count: 3;
}
#menumini {
  width: 365px;
}
#foodplace {
  width: 365px;
  column-count: 2;
}

<!-- This is the menu of my website-->
<article>
  <div id="menu">
    <div class="menumini" alt>
      <h2> BURGERS</h2>
      <div class="foodplace">
        <div class="Hamburger">
          <img src="img/hanburger.png" alt="hamburger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Chesse Burger">
          <img src="img/hanburger.png" alt="Chesse Burger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Bacon Burger">
          <img src="img/hanburger.png" alt="Bacon Burger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Bacon cheese Burger">
          <img src="img/hanburger.png" alt="Bacon cheese Burger">
          <p>Hamburger...$5.29</p>
        </div>
      </div>
      <!-- food place ends here-->
    </div>
    <!--menu mini ends-->
    <div class="menumini">
      <h2>little BURGERS </h2>
      <div class="foodplace">
        <div class="Hamburger">
          <img src="img/hanburger.png" alt="hamburger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Chesse Burger">
          <img src="img/hanburger.png" alt="Chesse Burger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Bacon Burger">
          <img src="img/hanburger.png" alt="Bacon Burger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Bacon cheese Burger">
          <img src="img/hanburger.png" alt="Bacon cheese Burger">
          <p>Hamburger...$5.29</p>
        </div>
      </div>
      <!-- food place ends here-->
    </div>
    <!--menu mini ends-->
    <div class="menumini">
      <h2>HOT DOGS </h2>
      <div class="foodplace">
        <div class="Hamburger">
          <img src="img/hanburger.png" alt="hamburger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Chesse Burger">
          <img src="img/hanburger.png" alt="Chesse Burger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Bacon Burger">
          <img src="img/hanburger.png" alt="Bacon Burger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Bacon cheese Burger">
          <img src="img/hanburger.png" alt="Bacon cheese Burger">
          <p>Hamburger...$5.29</p>
        </div>
      </div>
      <!-- food place ends here-->
    </div>
    <!--menu mini ends-->

Answer 1

First I would adjust your HTML like so:

<div class="menumini" alt>
  <h2> BURGERS</h2>
  <div class= "foodplace">
     <div class= "burger hamburger">
        <img src="img/hanburger.png"alt="hamburger" >
        <p> Hamburger...$5.29</p>
      </div>
      <div class= "burger ChesseBurger">
        <img src="img/hanburger.png" alt="Chesse Burger">
        <p> Hamburger...$5.29</p> 
      </div>
      <div class= "burger BaconBurger">
        <img src="img/hanburger.png" alt="Bacon Burger">
        <p> Hamburger...$5.29</p> 
      </div>
      <div class= "burger BaconCheeseBurger">
        <img src="img/hanburger.png" alt="Bacon cheese Burger">
        <p> Hamburger...$5.29</p> 
      </div> 
  </div><!-- food place ends here-->
</div> <!--menu mini ends-->      

Then you will adjust the CSS like so:

.menumini {
  display:inline-block;
  vertical-align:top;
  width:40%;
}
.foodplace {
  display:block;
  width:100%;
  text-align:center;
}
.burger {
  display:inline-block;
  vertical-align:top;
  width:45%;
  text-align:center;
}

This will allow you to style all the burgers with one class but also allow you to make individual adjustments to a specific one by using:

.burger.CheeseBurger