CODEWITHSUNDEEP
css
mjmitche
mjmitche

Reputation: 2067

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 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; }

Upvotes: 5

Views: 23188

Answers (6)

ididathing
ididathing

Reputation: 11

.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.

Upvotes: 0

William di Domenico
William di Domenico

Reputation: 21

Solved it for me.

min-width:100%

Upvotes: 1

bendr
bendr

Reputation: 2475

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

Upvotes: 2

Guffa
Guffa

Reputation: 700192

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

Upvotes: 4

thirtydot
thirtydot

Reputation: 228162

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.

Upvotes: 15

rolling stone
rolling stone

Reputation: 13016

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

body {
    margin: 0;
    padding: 0;
}

Upvotes: 5

Related Questions