Content not touching the sides of the screen

Question

I want to have my header in a div, but the div isn't directly touching any of the page, but there is a little bit of room on the sides. Why? And how can I remove that? The div is just

<div class="header">
    <img src="images/header.png" width="600" height="252" alt="Header" />
</div>

And the style.css file contains

.header {
    background: url(../images/header_extend.png) repeat-x center;
    overflow: hidden;
}
.header img {
   display:block;
   margin:0px auto;
   max-width: 100%;
   height: auto;
   overflow: hidden;
}

The header_extend.png is to fill the rest of the screen width.

Answer 1

You should remove the default margin from the body tag.

body { margin:0 }

Additionally, if you want to use percentage for the .header div's width, you should specify the parent's width as well. In case the parent is the body tag, this is what you can do:

body { 
    margin: 0;
    width: 100%; 
}

Here's a fiddle

Answer 2

try to add css:

body {
   margin: 0px;
   padding: 0px;
}
.div {
   margin: 0px;
   padding: 0px;
}

and if it's still not working so trim your code to one line. sometimes there is a little space of 1px that come from the breaking line.

like this:

<div class="header"><img src="images/header.png" width="600" height="252" alt="Header" /></div>

Answer 3

Try adding a reset to the top of your CSS. It often squashes these little spacing bugs.

http://meyerweb.com/eric/tools/css/reset/