CSS: Width 100% is not 100% of Screen

Question

On my sandbox site there is a white bar across the top. It is contained within the body(which has the background image), and the navbars styles are

#topnav4 {background: #fff;  width: 100%; height: 70px;  }

But the bar doesn't reach the edges of the screen. Furthermore, I don`t have any margins or padding set. does anyone know how to fix this?

Update, also note that the navbar is not at the very top of the screen. There is space between the top of the navbar and the top of the page. How do I get rid of this?

Update, I added this code but the problem is still not fixed

#topnav4 {background: #fff; position: absolute; left: 0px; top: 0px; width: 100%; height: 70px; }

Answer 1

The snippet you're looking for is:

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

That will remove the default user agent "page margins" in all browsers.

Remove your position: absolute-based additions - that's not the optimal way to solve this problem.

Answer 2

You probably need to set the margin and padding of your body to 0.

body {
    margin: 0;
    padding: 0;
}