Footer does not follow site layout and is not responsive

Question

Everybody, good afternoon, everybody.

I’m having difficulty making the footer responsive, it does not follow the page. Can you help through this code I made? (I tried to implement some tips I found around here but it didn’t work)

Grateful.

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

footer .container {
	position: relative;
	width: 900px;
}

.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>

Answer 1

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 the <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>