@media screen and (max-width:480px) {
h1{
text-align: center;
}
nav{
position: static;
}
.caja, .principal, .mapa-contenido, .contenido-diferenciales, .video{
width: auto;
}
.lista-diferenciales, .imagen-diferenciales{
width: 100%;
}
}
¡Hola Charles!
Por lo que puedo ver, el código que has compartido es un media query que se activa cuando la pantalla tiene un ancho máximo de 480px. Dentro de este media query, se están aplicando algunos estilos CSS a diferentes elementos HTML.
En cuanto a tu pregunta, si lo que quieres es replicar lo que hicimos en el aula, necesitaría más contexto sobre lo que se hizo en clase. Si me puedes proporcionar más información, estaré encantado de ayudarte a replicar lo que se hizo en clase.
Espero haber ayudado y buenos estudios!