CSS footer width:100% causes horizontal scroll

Question

i'm having trouble giving a footer 100% width it causes a horizontal scroll can u see something ? When i lower the 100% it makes a orange bar at the side because that's the background, i read that having a padding on the element could cause it but i'm pretty sure there isn't any padding present on the content of my footer bar so could anyone help out?

/* CSS Document */

/*-- RESET | Based on Eric Meyer --*/

ol, ul {
    list-style: none;
    padding:0px;
}

li {
    line-height:25px;   
}
/*-- BODY BORDER --*/
.bt, .br, .bb, .bl { 
    background: white; position: fixed; z-index: 99999; 
}
.bl, .br {
    top: 0; bottom: 0; width: 5px; 
}
.bt, .bb {
    left: 0; right: 0; height: 5px; 
}
.bt { 
    top: 0; 
}
.br { 
    right: 0; 
}
.bb { 
    bottom: 0; 
}
.bl { 
    left: 0;
}


/*-- MAIN --*/
html, body { 
    height: 100%; 
}
body {
    text-transform: uppercase;
    background: #FCD9CA; 
}

.clear { 
    clear: both; overflow: hidden; 
}

.sidebar {
    padding: 15px 0;
    border-top: 1px solid black;
    border-bottom: 1px solid black; 
}

.sb-slider {

    padding-top:0px;
    margin-top:0px; 
}
.container {
    padding-bottom:100px;   
}


.logo {
    padding-left:15%;
    position:relative;
    top:125px;
    margin: 0 auto; 
}

.top {
    padding-left:5%;
    position:relative;
    top:200px;
    margin: 0 auto;
}

.footercontact {
    padding: 15px 0;
}
.footer {
    padding-left:5% 
}
footer {

    border-top: 1px solid black;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    background:#fff;
}

i've made a fiddle to show you the problem http://jsfiddle.net/9gh3ht48/2/

Answer 1

As @Lal mentioned the problem is caused by the left padding on .footer.

I'm assuming this padding is a necessary part of your design so a better solution would be to set the box-sizing property of your footer to border-box:

.footer {
    padding-left:5% 
    box-sizing: border-box;
}

DEMO

---

Edit

Ok try this:

DEMO

.footer {
   padding-left:5%;
   margin: 0;
}

Answer 2

Just remove the 100% width from your footer and add right:0; instead.

That rule combined with left:0 will ensure the element spans the full width and any padding and borders will not cause a scroll.

(The box-sizing rule should have worked also assuming you had the vendor prefixes for older browsers and weren't supporting less than IE8)