Div filling entire width of screen

Question

I've been trying to add a header to my website, but I cannot get the container to fit the full width of the screen, despite the width being set to 100% or auto. It always has about a ~5px margin on both the left and right, even with margin and padding both set to 0.

HTML:

<div id="header">
    <h7>
        <p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p>
    </h7>
</div>

CSS:

body div#header{
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #c0c0c0;
}

Answer 1

Add

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

to your CSS.

Browsers put default margins and/or paddings when rendering websites. With this you can avoid that.

Answer 2

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

div { width: 100%;
    margin: 0;
    padding: 0;
    background-color: #c0c0c0;
}

OR

html, body, div {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
}

Answer 3

This is because it's being padded by it's parent. Do you have it contained in another div? Or maybe you have a padding/margin property set on the document's body? Please supply your full CSS. If you don't it's because the browser is adding it for you, so explicity set it using:

body {
    margin: 0;
    padding: 0;
}