title: Margin-top doesn't get applied (not working)
body: <p>This question is for <a href="http://freshbeer.lv/final/index.html" rel="nofollow">this website</a>
  <br />
  Everything is good but for some reason my <code>.content</code> div, which is given a css rule <br /> <code>margin-top: 50px;</code> doesn't seem to have that margin working on it. I gave bright yellow background colour to the div that has problem so you can see it.</p>
  
  <p>Here is <strong>css</strong> code of elements that might cause the issue. (Not sure it could be other elements as well.)</p>
  
  <pre><code>header {
      background-color: #1d130e;
      background-image: url("../img/header_bg.png");
      background-repeat: no-repeat;
      background-position: center;
      width: 100%;
      min-width: 1000px;
      height: 100px;
      margin-top: 50px;
      border-top: 1px solid #0d0907;
      border-bottom: 1px soid #0d0907;
      box-shadow: 0px 0px 15px -1px #181513;
  }
  
  .content {
      margin-top: 50px;
      width: 1000px;
      margin: 0 auto;
      background: #eef496;
  }
  </code></pre>
  
  <p>And <strong>HTML</strong> of the page:</p>
  
  <pre><code>&lt;body&gt;
          &lt;!-- Header --&gt;
          &lt;header&gt;
              ...
          &lt;/header&gt;
          &lt;!-- Header [END] --&gt;
  
          &lt;!-- Content --&gt;
          &lt;div class="content"&gt;
              &lt;!-- Slideshow --&gt;
              ...
              &lt;!-- Slideshow [END] --&gt;
          &lt;/div&gt;
          &lt;!-- Content [END] --&gt;
  
          &lt;!-- Footer --&gt;
          &lt;footer&gt;&lt;/footer&gt;
          &lt;!-- Footer [END] --&gt;
      &lt;/body&gt;
  </code></pre>