Missing something to make header go full width of screen

HTML & CSS
1

I know I am missing something small but I cant pin point it. I am basically wanting my header image to go the full length of the screen.

Here is what I have now.

See how you can see about 2px of grey on the left and top? I want it to go all the way across and be pushed up to the top.

Here is the code I am using. Pretty simple but like I said, I cant pin point what I am missing.

html

<body>
<div class="header">
</div><!--end header-->
<div id="container">

</div><!--end container-->
</body>

css

body {
	background-color:#c8c9ca;
	}

#container{
	 width: 980px;
    margin: 0 auto;
	}
	
.header {
	background-image:url(../images/header-bg.png);
	background-repeat:repeat-x;
	height:150px;
	width:100%;
	}

EDIT:

I think I found it, I added this to the body and it made it work.

  width:100%;
    height:100%;
    margin:0;
    background-repeat:no-repeat;
    background-position:top center;
2

Hi,

The html and body elements have default margins (and padding in some cases) so you need to reset them to zero:


html,body{margin:0;padding:0}

No need to set widths for either of those.:slight_smile: