Why do I get a horizontal scrollbar for width: 100% in chrome?

Starting with:

html, body 
{ 
    padding: 0; 
    width: 100%;
    font: 100%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

Chrome decides that the width should be 1600px, which is wider than my current display, let alone the current Chrome window. I'm sure this is an old chestnut, but I'm failing to find the right tree.

I posted a complete example to git://github.com/bimargulies/css-mystery.git.

One note: My macbook was plugged into a very wide monitor, and is now not. The 1600px seems to me to be related to that, but I don't know how to make it go away except to reboot.

In the chrome devo tools, looking at the effective styles for the , I see:

width: 1600px;
   html, body - 100%

That 1600 is very mysterious. And this is after a reboot.

EDIT bingo: buried in the style sh开发者_运维知识库eet main.css, from someone else I work 'with', was 'minWidth: 100em;' on body. oops.

You need to add margin: 0 to remove the default margin on the body element.

Are you sure you need width: 100%?

html and body are by default "full width" due to being block-level elements.

Try using a CSS reset...

http://meyerweb.com/eric/tools/css/reset/index.html

... to set all CSS properties to their default values.

I hope this helps.
Hristo

For the record, I think it's best to actually have the explanation in an answer.

There was another CSS clause way down the file:

body
{ 
    minWidth: 100em;
}

I didn't spot it, and the Chrome 'Computed Styles' box does not include this in the 'explanation' of the 1600px in the same way that it include width styles.

I had same issue. could be other div in body is having padding or margin.

margin or padding can cause it.

in my case, was padding