Whenever I come across HTML problems, they seem so simple that I almost feel silly asking about them. But here I am, clueless about why this issue is occurring.
In the following fiddle http://jsfiddle.net/o5ee1oag/2/, the body is being pushed down by a 50px margin on the header:
<body>
<div id="background"></div>
<header>
<ul>
<li>Button 1</li>
<li>Button 2</li>
</ul>
</header>
</body>
As a result, setting div#background { position: absolute; } also gets pushed down. When inspecting with Firebug and applying background: red; to the body, the entire area turns red, including the margin.
1) Why is this happening when the body should be positioned 50px from the top?
2) How can I prevent the body from being pushed down in this way?
Your help would be greatly appreciated :).