Horizontal Scrollbar CSS

I've got an issue which i've never had before up until this site and i can't figure out the problem.

I build my sites with a wrapper set at 100% width; and a container set at 960px with a margin of '0 auto' to center the container.

Most of the time (and as with this one) i have a header wrapper/container, main content wrapper/container and footer wrapper/cont开发者_如何学JAVAainer.

In addition, my body is set to 100% width and height.

The problem is my header wrapper is causing a very small scroll to occur, and when i scroll right to see, the entire right of the page seems to have a 20 pixel margin.

I don't seem to get the problem in Chrome, just IE and Firefox.

My CSS is cleared with this at the beginning:

body, div, dl, dt, dd, ul, ol, li,
 h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
 margin: 0;
 padding: 0;
}

My main body style is set as:

body {
float: left;
font-family: 'Verdana', 'Arial';
background: #E3E3E3;
width: 100% ;
height: 100%;
color: #5B5B5B;
}

I'm a bit embarrassed to ask this as CSS bugs are normally a breeze to get through, but i've no idea with this. As for the other wrappers, as i mentioned, they're all set as:

wrapper { float: left; width: 100%; height: 100%;}
content {width: 960px; margin: 0 auto; }

Any ideas? It's driving me insane!

---

Try resetting you css first. This is what I use to start my main stylesheet:

* {margin:0;padding:0;outline:0;border:0;
-webkit-font-smoothing: subpixel-antialiased !important; text-rendering:optimizeLegibility;}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q,
samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th,
td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

You need to reset styles before you can troubleshoot bugs like this. Then it's a breeze...

---

Since the space causing the scrollbar is empty, you could just force that section to never show a scrollbar with--

overflow: hidden;

Then you can get on with the project & come back later to figure out what's causing it if you want to.