Sticky footer and footer color not changing

Question

I am having a problem getting my footer to stay at the bottom I have made it position: fixed; but it will still come up if the content changes. Also, i can't get the background-color to change. Is there something wrong with my code that I am just not seeing?

HTML:

<div id="footer">
  <div class="container">
    <span class="left text-muted">content </span>
    <span class="right">
    Content
    </span>  
  </div>
</div>

CSS:

.footer {
height: 60px;
background-color: #939598;
position: fixed;
}

.left {
float:left;
align: left;
}

.right {
float:right;
}

Answer 1

You are using the wrong selector.

Its supposed to be the id based selector #footer and not the class based .footer.

#footer {
  height: 60px;
  width: 100%;
  background: #939598;
  position: fixed;
  bottom: 0px
}
.left {
  float: left;
}
.right {
  float: right;
}

<div id="footer">
  <div class="container">
    <span class="left text-muted">content </span>
    <span class="right">
   footer  Content
    </span> 
  </div>
</div>