title: Margin-top not working on div
body: <p>I'm so confused by why <code>margin-top</code> will not work. Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-extended-blog"&gt;
      &lt;div class="offers-for-week"&gt;
          &lt;h1 class="title offers-for-this-week"&gt;offers for this week&lt;/h1&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.&lt;/p&gt;
          &lt;img src="img/extended_blog_pic.jpg" alt="image of recipe"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.&lt;/p&gt;
      &lt;/div&gt;&lt;!-- /.offers-for-week --&gt;
  &lt;/div&gt;&lt;!-- /.container-extended-blog --&gt;
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>.container-extended-blog {
      margin-top: 200px;
      margin-left: 300px;
      background-color: $blue-ot;
      width: 350px; 
      height: 450px;
      overflow: hidden;
      p {
          font-family: $content-font;
          color: $icon-font-color;
      }
  }
  </code></pre>
  
  <p>I have tried adding <code>position: relative;</code> which I find usually works whenever something like this happens, however I have no idea why this isn't working, and would really like to understand!</p>