CSS: Width 100% is not 100% of Screen

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开发者_JAVA技巧 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; }

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.

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

body {
    margin: 0;
    padding: 0;
}

You don't have a doctype on the page, so it will be rendered in Quirks Mode. This means that the browser tries to be compatible with ancient versions of the browser.

It's especially bad for IE, where it also will use a non-standard box model: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Add a doctype to the page: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Add the following to the top of your CSS file, then go and read about CSS Resets:

* { margin: 0; padding: 0; }

Here's some resources that I found helpful:

1. Best CSS Reset

2. W3 Schools (The Doctype)

3. The Box Model

Solved it for me.

min-width:100%

.container {display: grid;}

in the website and

.container {display: block;}

in the mobile view.

I was having the same problem and noticed that my display was set to grid and so it was adjusting to 100% of the column instead of the entire screen.