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

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>

Try add overflow hidden:

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

That should work (but is hacky).

If the elements are side by side and have a combined width or , as BDawg says margins or paddings, that cause it to exceed 960px a scroll bar could appear. Post your entire code and we can figure it out very quickly. Hiding the overflow should work but it would not really explain why the scroll bar is appearing. Giving us your entire markup will help find the root of the problem.