Hey,

Having a really simple problem, I've never come accross this before so I think Im being stupid and missing something silly.

Basicaly Im just trying to push my header away from the top of the wrapper div, thing is the margin setting on the header which is nested inside the wrapper is pushing both the wrapper and itself away from the top of the page, adding padding instead just has no effect.

Any ideas?

http://mattadamson.mine.nu/test/

If you look at the page I have the simple code below

HTML Code:
<div id="wrapper_bg">

<div id="header">
TEST HEADER
</div><!--close #header-->

<div id="content">
</div><!--close #content-->

</div><!--close #WRAPPER_BG-->
And CSS

Code CSS:
body
{
	margin: 0;
	padding: 0;
	background: #bbbec0;
}
#wrapper_bg
{
	width: 100%;
	height: 589px;
	margin: 0;
	background: url(img/outer_bg.jpg) repeat-x;
}
#header
{
	width: 980px;
	height: 55px;
	margin: 40px auto 0 auto;
 
}