css formatting problems

So I wanted to mess around with Sass so I created this tiny incredibly simple little page. For reasons unknown to me when I add a top-margin to #content it effects my wrapper div instead. Any information as to why this is happening would be greatly appreciated. Thanks!

Here is the page live: http://cheapramen.com/omg/

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" />



<title>YO</title>

</head>

<body>

<div id="wrapper">

<div id="content">

<div class="dog">
Bury me with my money
</div>

</div>






</div>
</body>
</html>

Sass

html body
    background-color: #000
    padding: 0
    margin: 0
    height: 100%

#wrapper
    background-color: #fff
    width: 900px
    height: 700px
    margin: 0 auto

#content
    width: 500px
    margin: 150px 0 0 50px  

.dog
    color: #FF3836
    font-size: 25px
    text-shadow: 2px 2px 2px #000
    width: 500px
    height: 500px
    -moz-border-radius: 5px
    -webkit-border-radius: 5px
    border: 18px solid #FF3836

Css that the Sass spits out

html body { background-color: #000; padding: 0; margin: 0; height: 100%; }

#wrapper { background-color: #fff; width: 900px; height: 700px; margin: 0 auto; }

#content { width: 500px; margin: 150px 0 0 50px; }

.dog { color: #FF3836; font-size: 25px; text-shadow: 2px 2px 2px #000; width: 500px; height: 500px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 18px solid #FF3836; }

ansaurus

tags:

views:

answers:

css formatting problems

related questions