Horizontal scrollbar bug when minimising window - html

Question

I'm encountering some difficulty with some CSS I'm coding.
Whenever I minimise the window a horizontal scrollbar appears and the problem with this scrollbar is that it doesn't go away even when I maximise the window.
What could I be doing wrong?
Thanks in advance
CSS
body {
background-color: #C5C5C5;
margin-left: 0px;
margin-top: 0px;
}
html {
overflow-y: scroll;
}
.header_bg {
background-color: #F1F1EE;
padding: 10px 10px 10px 10px;
border-top: 2px solid #738ebe;
width: 100%;
}
.header_main {
width: 960px; // would it be better to change this to width: 80%
margin:0 auto;
overflow: hidden;
}
.header_main img {
float: left;
}
.header_main div {
float: right;
}
HTML
<div class="header_bg">
<div class="header_main">
<img src="resources/img/login_logo.png" width="163" height="66" />
<div>Already a member? Sign in</div>
</div>
</div>​

Answer 1

This:
.header_bg {
background-color: #F1F1EE;
padding: 10px 10px 10px 10px;
border-top: 2px solid #738ebe;
width: 100%;
}
Is adding to the calculated width of it's container, ie, body, which header_bg is stretching to fit 100%, so the padding is shifting bodys dimensions beyond the viewport, thus triggering scroll-x.
Remove it and your scroll bar goes away:
padding: 10px 0;
Edit: http://jsfiddle.net/userdude/782fc/2/
Full: http://jsfiddle.net/userdude/782fc/2/embedded/result
Or, alternatively, put the width on the body with margin: 0 auto; so it auto-centers:
body {
background-color: #C5C5C5;
width: 1024px;
margin: 0 auto;
}
...
.header_bg {
background-color: #F1F1EE;
padding: 10px;
border-top: 2px solid #738ebe;
width: 100%;
}
.header_main {
width: 100%;
margin:0 auto;
overflow: hidden;
}
Edit: http://jsfiddle.net/userdude/782fc/4/
Full: http://jsfiddle.net/userdude/782fc/4/embedded/result/