title: Margin not working with float elements
body: <p>On my web page, I have a logo and a menu that make up header elements and a hero unit under it.
  Now I want to give it some bottom margin so there is enough negative space between
  header and hero unit but this bottom margin (100px) is not applying.
  Same thing if I try to give top margin from hero unit.</p>
  
  <pre><code>.header {
      width: 95%;
      margin: 20px auto 100px;
  }
  </code></pre>
  
  <p>Here is my working sample <a href="http://jsbin.com/AQUCidu/3/edit" rel="noreferrer">JS BIN</a></p>