Footer does not track site layout and is not responsive

Is because you set a fixed width on <div class="container">, so it will never track the width of the screen, because it will always have the width of 900px.

Instead of putting width: 900px;, change to width: 100%; and put max-width: 900px; and width: 100%; in <footer>:

footer {
    background-image: url(../img/fundo-rodape.png);
    clear: both;
    padding: 20px 0;
   background-color: red;
    max-width: 900px;
   width: 100%;
}

footer .container {
    position: relative;
   width: 100%;
}

Example:

/*Edição do rodape (Footer)*/
footer {
	background-image: url(../img/fundo-rodape.png);
	clear: both;
	padding: 20px 0;
   background-color: red;
	max-width: 900px;
   width: 100%;
}

footer .container {
	position: relative;
   width: 100%;
}

.social{
	position: absolute;
	top: 12px;
	right: 0;
}

.social li{
	float: left;
	margin-left: 25px;
}

.social a{
	/*tamanho da imagem*/
	height: 32px;
	width: 32px;
	
	/*image replacement*/
	display: block;
	text-indent: -9999px;
}

.social a[href*="facebook.com"]{
	background-image: url(../img/facebook.png);
}

.social a[href*="twitter.com"]{
	background-image: url(../img/twitter.png);
}

.social a[href*="plus.google.com"]{
	background-image: url(../img/googleplus.png);
}
/*Edição do rodape (Footer)*/

<footer>
            <!-- Conteúdo do rodapé --> 
			
   <div class="container">
      <img src="img/logo-rodape.png" alt="Logo Mirror Fashion">
      
      <ul class="social">
         <li><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
         <li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
         <li><a href="http://plus.google.com/mirrorfashion">Google+</a></li>
      </ul>
      
   </div>
</footer>