Keep content inside footer - html

Question

I've been working on a landing page for a client and I've come across a problem when trying to keep my footer_content inside the footer
The all page is responsive but when it comes to the footer_content he just doesn't work. Right know I styled it back to px instead of % to have some functional work to show but if you guys could help m e make it responsive and block it inside the footer and would really appreciate it.
My code right now is:
<div class="foot">
<div class="foot_content">
<div class="foot_title">
<p style="font-size:18px; font-weight:bold; margin-left:auto; margin-right:auto">AS NOSSAS FUNCIONALIDADES<p>
<p style="font-size:12px; margin-left:auto; margin-right:auto; line-height:18px">Para o ajudar a encontrar os seus futuros clientes.<p>
</div>
<div class="foot_text_content">
<div class="foot_text_col_1">
<img src="img/pub.png" alt="publicidade" />
<p style="font-size:14px; font-weight:bold; margin-top:10px">GERIMOS A SUA PUBLICIDADE<p>
<div style="line-height:16px; margin-top:5px; font-size:14px">
<p>A nossa equipa de designers está<p>
<p>sempre pronta para dár resposta às<p>
<p>suas necessidades criativas.<p>
<p>Assim que resolvidas poderemos<p>
<p>ainda publicitá-las no nosso website.<p>
</div>
</div>
<div class="foot_text_col_2">
<img src="img/negocio.png" alt="negócio" />
<p style="font-size:13px; font-weight:bold; margin-top:10px">GERAMOS NEGÓCIOS<p>
<div style="line-height:16px; margin-top:5px; font-size:14px">
<p>O nosso website funciona como uma<p>
<p>rampa de lançamento para o seu negócio.<p>
<p>Através do “SEO” do nosso website,<p>
<p>garantimos que a sua publicidade<p>
<p>chegará a todos os seus clientes.<p>
</div>
</div>
<div class="foot_text_col_3">
<img src="img/success.png" alt="negócio" />
<p style="font-size:13px; font-weight:bold; margin-top:10px">GARANTIMOS SUCESSO<p>
<div style="line-height:16px; margin-top:5px; font-size:14px">
<p>Com todas estas ferramentas que<p>
<p>referimos, o seu sucesso será<p>
<p>garantido, resta-lhe apenas fechar<p>
<p>negócio.<p>
</div>
</div>
</div>
</div>
<div class="background">
<img src="img/foot_bg.png" />
</div>
and the css is
.foot {
position:absolute;
margin-bottom:auto;
bottom: 0;
width:100%;
height: 41.5%;
}
.background {
background: none repeat scroll 0 0;
height: 100%;
width: 100%;
bottom: 0;
margin-bottom:auto;
position:absolute;
}
.background img {
bottom: 0;
display: block;
left: 0;
margin: auto;
width:100%;
min-width:90%;
height: 100%;
min-height:41.5%;
right: 0;
top: 0;
z-index:-1;
}
.foot_content {
width:960px;
height:258px;
margin:auto;
bottom:20px;
left:0;
right:0;
position:absolute;
z-index:1;
}
.foot_title {
width:960px;
height:34px;
font-family: Arial, sans-serif;
text-align:center;
}
.foot_text_content {
width:960px;
height:193px;
margin-top:30px;
}
.foot_text_col_1 {
width:267px;
height:193px;
font-family: Arial, sans-serif;
text-align:center;
float:left;
}
.foot_text_col_2 {
width:267px;
height:193px;
font-family: Arial, sans-serif;
text-align:center;
float:left;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
position:absolute;
}
.foot_text_col_3 {
width:267px;
height:193px;
font-family: Arial, sans-serif;
text-align:center;
float:right;
}`
Thanks in advance
EDIT Fiddle link as requested https://jsfiddle.net/wppo1bvo/