setting the width of my footer to 100% shows a scrollbar - css

Question

Although I set the width of my footer to 100%, there it extends to more than 100% having a scroll bar in terms of width. Any ideas why? I know the problem is the width because when I remove the 100%, it does not show the scroll bar. The page is broken down to body>wrapper>footer
Here is my code:
#footer {
margin-top: 30px;
color: white !important;
padding-bottom: 15px;
background: black;
text-align: center;
padding: 20px;
height: 40px;
min-width: 1000px;
width:100%;
position:absolute;
bottom:0;
}
And there is the body css:
body {
font: normal 12pt Georgia, serif;
color: #111;
background: #990000;
margin: 0 auto;
text-align: center;
background-position: 50% 50%;
min-height: 100%;
margin:0;
padding:0;
height:100%;
}
And the wrapper css:
#wrapper {
min-height:100%;
position:relative;
}

Answer 1

You have padding set in your footer's css. That adds up to the width and makes it bigger than 100%. That's why you are seeing a scrollbar.
Replace the padding with these following lines.
padding-top:20px;
padding-bottom:20px;
Also by setting footer div's min width to 1000px, you will get the scrollbar in browser screens narrower than 1000px.

Answer 2

Many browsers have a default margin around the BODY element, which adds to the width.

Answer 3

Most likely this is due to how the default Box Model works in html pages: after the width is set to 100% for content, the borders, margins and paddings are added, increasing the final width beyond 100%.
For modern browsers: hail box-sizing!
See this jsfiddle with your original code.
See this newer version with box sizing set to border-box (only works in newer browsers). This version doesn't show a horizontal scrollbar (I made the min-width a lot smaller, or it would throw off the example in jsfiddle).
For older browsers
If you want to fix this for older browsers you'll have to do something about the padding in your CSS. Remove it from the footer, and place a "footer-content" div inside with margins equal to your old paddings. E.g.:
#footer {
/* padding: 20px; removed! */
}
#footer-content {
margin: 20px;
}

Answer 4

This is happening because of the padding. See the illustration of your problem here.
When you use padding, the size gets added to the total height and width respectively.
Removing the padding will fix your problem. Demo
#footer {
margin-top: 30px;
color: white !important;
background: black;
text-align: center;
height: 40px;
min-width: 1000px;
width:100%;
position:absolute;
bottom:0;
}
Another good solution is to make the browser treat your element differently. by using box-sizing property.
#footer {
/* Add box-sizing */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
margin-top: 30px;
color: white !important;
padding-bottom: 15px;
background: black;
text-align: center;
padding: 20px;
height: 40px;
min-width: 1000px;
width:100%;
position:absolute;
bottom:0;
}
Demo

Answer 5

Just add 0 padding, 0 border and 0 margin to all elements at start.
* {
padding: 0;
border: 0;
margin: 0;
}