css divs have different widths when they shouldnt

I have a div container that contains 2 divs: banner and content. Both banner and content have css property width set to 100% but they are different when rendered.

this is my index.html

<!doctype html>
<html lang="en">
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet"/>
    <title>JoeY34kaze's gw2 stuff</title>
<body>
    <div id="container">
        <header>
            <h1>
                This is my header.
            </h1>
        </header>
        <div id="banner">
            <h2>
                This is the banner.
            </h2>
        </div>
        <div id="content">
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
        </div>
    </div>

</body>
</html>

this is my style.css

    body {
    text-align:center;
}


header {
    width:100%;
    height:100px;
    background: #dbdbdb;
    z-index:10;
    position: fixed;
}

#container {
    overflow:hidden;
    min-width:100%;
    padding:0;
}

#banner {
    width:100%;
    height: 500px;
    padding:0;
    position: fixed;
    top: 100px;
    background-color:#707070;
}

#content {
    height:100%;
    width:100%;
    position: relative;
    top:400px;
    background-color: #ebebeb;
}

and the page looks like this:

website

Until i resolve this issue the page is also live here https://gw2stuff.herokuapp.com/

The problem is that on the right side the 2 divs aren't aligned, but they should be. I think that the problem comes from the relative position of the content div, but i was unable to fix it, so my question is how do i align the 2 divs so that their widths will match?

Solution

Remove the default margin on the body

body {
margin:0;
}

The #content div is affected by that margin but the fixed position elements are not although they are placed in relation to that margin becausee you have not stated a left:0 position for them.

This should be automatically included in any CSS Reset.