La consulta de medios div no cambia de ancho pero todo lo demás funciona

Estoy tratando de ajustar el ancho de un div cuando el navegador disminuye de tamaño con el ancho máximo. El div hace todo menos cambiar el ancho. Lo he visto a través de las herramientas de desarrollador en el navegador Chrome y el ancho se ha reducido. ¿Qué pasa?

HTML

         
Aifjoisdjfiosjdfoisdjfoidsjfoisjd

CSS PRINCIPAL:

 *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } html, body { height:100%; } body { padding:60px 0 0 0; /* 60 — header height*/ margin:0; } .main { min-width:100%; height:60px; margin-top: -60px; /* 60 — header height*/ margin-left: -300px; border-bottom: solid 1pt #ADADAD; } .containerRight { float:left; width:100%; height: 100%; overflow-y: scroll; } .left { float:left; height: 100%; width: 300px; border-right: solid 1px #C9C9C9; -webkit-box-shadow: 1px 0 2px #888888; -moz-box-shadow: 1px 0 2px #888888; box-shadow: 1px 0 2px #888888; } 

CSS RESPONSABLE

 .left { width: 800px; background-color: red; } .containerRight { display: none; } 

En lugar de poner la media=screen en la cabeza, para su archivo responsive.css, use esto:

 @media (max-width:500px){ .left { width: 800px; background-color: red; } .containerRight { display: none; } 

}

Aprenda los conceptos básicos sobre las consultas en los medios aquí: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps y https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/ Media_queries . Esto debería ayudarte a comenzar.