Margin-top not working on div - html

Question

I'm so confused by why margin-top will not work. Here is my code:
HTML:
<div class="container-extended-blog">
<div class="offers-for-week">
<h1 class="title offers-for-this-week">offers for this week</h1>
<p>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.</p>
<img src="img/extended_blog_pic.jpg" alt="image of recipe">
<p>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.</p>
</div><!-- /.offers-for-week -->
</div><!-- /.container-extended-blog -->
SCSS:
.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;
}
}
I have tried adding position: relative; 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!

Answer 1

add position:absolute; to .container-extended-blog
.container-extended-blog {
top: 200px;
margin-left: 300px;
background-color: $blue-ot;
width: 350px;
height: 450px;
overflow: hidden;
position:absolute;
}
OR
Change top: 200px; to margin-top: 200px;
.container-extended-blog {
margin-top: 200px;
margin-left: 300px;
background-color: $blue-ot;
width: 350px;
height: 450px;
overflow: hidden;
}
see fiddle at : http://jsfiddle.net/Q5xdf/