What is the correct way to implementing a sticky footer inheriting its parent width?

Question

I have problems with the stick footer. I am using bootstrap 3's sticky footer approach from here: Sticky Footer - BootStrap. Its width is 100% and does not inherit the same width from the parent (html's or body's width). My website already has a margin: 10px which affects everything else on the page including the footer. Common sense would tell me to set the footer like so: margin-left: 0 !important, but this doesn't work. Also, I could just use overflow-x: hidden; to eliminate the scrollbar but that's just being lazy and not the right way of doing it. I just want the footer's width to inherit (in other words, cut out the footer's width that spans more than its parent) and maintain the same exact width as the parent.

Here is a visual example of my problem: http://jsfiddle.net/ubc92/

Sticky Footer CSS:

html {
      position: relative;
      min-height: 100%;
}
body {
      /* Margin bottom by footer height */
      margin-bottom: 60px;
}
footer {
      position: absolute;
      bottom: 0;
      width:100%; /*this adds a horizontal scrollbar more than the body and html's width.*/
      margin-left:0 !important; /*Tried to override and eliminate the scrollbar by setting the footer without any margin properties, but wasn't effective*/
      /* Set the fixed height of the footer here */
      height: 60px;
      background-color: transparent;
      color:white;
}
*{
    border: 1px dotted blue;
}

Answer 1

Solution 1 (css solution)

If you want to achieve this, just replace your footer css with this:

footer {
    position: fixed;
    bottom: 0;
    right: 10px;
    left: 10px;
    height: 60px;
    background-color: transparent;
    color:black;
    border: 1px dotted red;
}

---

Solution 2 (javascript solution)

If you want to achieve this just:

Load jQuery and add this into the javascript:

$('footer').width($('.jumbotron').width())

and change the footer position from absolute to fixed:

.footer {
    position: fixed;
}