Why is a horizontal scroll bar appearing if none of the elements are wider than the 960px container?

Question

Everything is wrapped in a div with an id="main_wrap"

the main wrap has this style:

#main_wrap{   margin:0 auto;   width:960px;   position:relative; } 

Since everything is wrapped inside of this div, I don't understand why a horizontal scroll bar would appear at the bottom.

Answer 1

If any of the children have borders, padding (or sometimes margins) applied to them, that adds to the width and height. Using overflow: hidden; would avoid the scroll bars. But, if something has too much width, you probably want to find where it is coming from to avoid possible problems in the future.

Note that you may be able to use box-sizing: border-box to prevent borders and padding from adding additional width (or height). This is particularly useful when you are using something like width: 100%, but width: 100% also isn't necessary in most cases - elements with display: block applied will fill the width by default AND keep padding and borders from adding additional width.

For example:

html, body { margin: 0; padding: 0; }    div {    background: #111;    color: #eee;    padding: 1em; /* This doesn't add to width - still at 100% width */    border: 2px solid #5e5;  /* This also doesn't add to width - still at 100% width */  }

<div>Test</div>