Why am I getting a horizontal scrollbar for width: 100% in chrome?

Question

Beginning 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 1600 pixels, which is larger than my current display, not to mention the current Chrome window. I am sure this is an old chestnut, but I can not find the right tree.

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

One note: my macbook was connected to a very wide monitor, but now not. It seems to me that 1600px is connected with this, but I don’t know how to get it to go, except to reboot.

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

 width: 1600px; html, body - 100% 

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

EDIT bingo: buried in main.css stylesheet, from someone else I work with with was 'minWidth: 100em;' on the body. oops.

Answer 1

For the record, I find it best to get an explanation in return.

There was another CSS sentence in the file:

 body { minWidth: 100em; } 

I did not notice this, and the Computable Styles field in Chrome does not include this in the 1600px “explanation” as well as the width styles.

Answer 2

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

Are you sure you need width: 100% ?

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

Answer 3

Try using CSS reset ...

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

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

Hope this helps. Christo