title: Why does "float: left" fix this margin issue?
body: <p>I have some practice code I've been given which displays three restaurant menu items. It's responsive, and has <em>"small", "medium"</em> and <em>"large"</em> modes. For some reason, in <em>"small"</em> mode the author hasn't given the blue containers "float: left" style. I don't know why but this causes the header box to have a small margin above it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
   font-family: Tahoma, Geneva, sans-serif;
  }
  
  h1 {
   font-size: 175%;
   text-align: center;
  }
  
  #p1 {
   background-color: #6666ff;
   font-size: 125%;
   text-align: center;
   float: right;
   padding: 5px 40px 5px 40px;
  }
  
  #p2 {
   background-color: #9966ff;
   font-size: 125%;
   text-align: center;
   float: right;
   padding: 5px 40px 5px 40px;
  }
  
  #p3 {
   background-color: #3366ff;
   font-size: 125%;
   text-align: center;
   float: right;
   padding: 5px 40px 5px 40px;
  }
  
  p {
   border: 1px solid black;
   padding: 50px 15px 15px 15px;
   margin: 10px;
   text-align: left;
   background-color: #ccffff;
  }
  
  .row {
   width: 100%;
  }
  
  /*.menu-box {
    float: left;
  }*/
  
  @media (min-width: 992px) {
   .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
   }
    .col-lg-1 {
      width: 8.33%;
    }
    .col-lg-2 {
      width: 16.66%;
    }
    .col-lg-3 {
      width: 25%;
    }
    .col-lg-4 {
      width: 33.33%;
    }
    .col-lg-5 {
      width: 41.66%;
    }
    .col-lg-6 {
      width: 50%;
    }
    .col-lg-7 {
      width: 58.33%;
    }
    .col-lg-8 {
      width: 66.66%;
    }
    .col-lg-9 {
      width: 74.99%;
    }
    .col-lg-10 {
      width: 83.33%;
    }
    .col-lg-11 {
      width: 91.66%;
    }
    .col-lg-12 {
      width: 100%;
    }
  }
  
  @media (min-width: 768px) and (max-width: 991px){
   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
   }
    .col-md-1 {
      width: 8.33%;
    }
    .col-md-2 {
      width: 16.66%;
    }
    .col-md-3 {
      width: 25%;
    }
    .col-md-4 {
      width: 33.33%%;
    }
    .col-md-5 {
      width: 41.66%;
    }
    .col-md-6 {
      width: 50%;
    }
    .col-md-7 {
      width: 58.33%;
    }
    .col-md-8 {
      width: 66.66%;
    }
    .col-md-9 {
      width: 74.99%;
    }
    .col-md-10 {
      width: 83.33%;
    }
    .col-md-11 {
      width: 91.66%;
    }
    .col-md-12 {
      width: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
   &lt;title&gt;Assignment Solution for Module 2&lt;/title&gt;
   &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt; Our Menu &lt;/h1&gt;
   
  &lt;div class="row"&gt;
   &lt;div class="col-lg-4 col-md-6 menu-box"&gt;&lt;p id="p1" class="menu-header-box"&gt;Chicken&lt;/p&gt;
   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis 
   fringilla elit sit amet tincidunt. Maecenas lacinia sem nec lobortis luctus. 
   In molestie volutpat tempor. Duis posuere ante eget finibus semper. Fusce 
   pretium enim sit amet tortor convallis, vel mollis eros lacinia. Vestibulum 
   dapibus arcu vitae viverra condimentum. Rutrum turpis quis, posuere velit. 
   Morbi dictum dui quis molestie finibus. Phasellus sed aliquet leo.&lt;/p&gt;&lt;/div&gt;
   &lt;div class="col-lg-4 col-md-6 menu-box"&gt;&lt;p id="p2" class="menu-header-box"&gt;Beef&lt;/p&gt;
   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis 
   fringilla elit sit amet tincidunt. Maecenas lacinia sem nec lobortis luctus. 
   In molestie volutpat tempor. Duis posuere ante eget finibus semper. Fusce 
   pretium enim sit amet tortor convallis, vel mollis eros lacinia. Vestibulum 
   dapibus arcu vitae viverra condimentum. Rutrum turpis quis, posuere velit. 
   Morbi dictum dui quis molestie finibus. Phasellus sed aliquet leo.&lt;/p&gt;&lt;/div&gt;
   &lt;div class="col-lg-4 col-md-6 menu-box"&gt;&lt;p id="p3" class="menu-header-box"&gt;Pork&lt;/p&gt;
   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis 
   fringilla elit sit amet tincidunt. Maecenas lacinia sem nec lobortis luctus. 
   In molestie volutpat tempor. Duis posuere ante eget finibus semper. Fusce 
   pretium enim sit amet tortor convallis, vel mollis eros lacinia. Vestibulum 
   dapibus arcu vitae viverra condimentum. Rutrum turpis quis, posuere velit. 
   Morbi dictum dui quis molestie finibus. Phasellus sed aliquet leo.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Code: <a href="https://jsfiddle.net/awto1c3b/" rel="nofollow noreferrer">https://jsfiddle.net/awto1c3b/</a></p>
  
  <hr>
  
  <p>Images showing the issue:</p>
  
  <p><a href="https://i.stack.imgur.com/2Y3Wj.png" rel="nofollow noreferrer">"Medium mode"-- okay</a></p>
  
  <p><a href="https://i.stack.imgur.com/ZQZNg.png" rel="nofollow noreferrer">"Small mode"-- weird margin above header box!</a></p>
  
  <hr>
  
  <p>I know that if I put "float: left" on all the boxes, then the margin issue doesn't appear (you can uncomment the .menu-box specifier in the CSS), but I don't understand what "float: left" has to do with the content inside it, why does it affect margins inside it? I was hoping someone more knowledgeable than myself would be able to shed some light on what's happening.</p>