recuerda que las reglas no solo debes aplicarlas al contenedor principal, si no que debes tambien indicar cual va a ser el comportamiento de los demas elementos, es decir, si en determinadas pantallas no le aplicas el float:left a algunos div, estos van a estar fijos y por mas ancho al 100% que le des al contenedor, el navegador no va a saber que hacer con el resto y se vera igual o peor, ejemplo:
Código CSS:
Ver original<style>
@media screen and (max-width:480px){
#wrap{
width:100%;
}
#main_container{
width:100%;
}
#header{
display:none; /*ocultamos el menu alcual*/
}
#nav{
display:block; /*mostramos el menu para movil o tablet*/
}
/*Resto de reglas para el menu movil*/
.home_section_dos{
width:100%;
}
.home_title{
font-size:16px;
font-weight:bold;
text-align:center
}
.home_section_dos p{
font-size:12px;
text-justify:auto;
}
}
</style>
aqui le decimos al navegador que va a hacer con los elementos si acceden desde un movil, como ver hay que indicar como van a estar organizados toooodos para que se cumpla lo responsive.
te recomiendo este sitio
http://responsivetest.net/ para ir haciendo pruebas de tu css y visualizar como se vera la pagina en diferentes dispositivos
Saludos