lo hecho en clase

css:

.banner{
    width: 100%;
}
.principal{
    width: 940px;
    margin: 0 auto;
    padding: 3em 0;
    background:#FEFEFE ;
}
.titulo-principal{
    font-size: 2em;
    text-align: center;
    margin: 0 0 1em;
    clear: left;
}
.principal p{
    margin: 0 0 1em;
}
.principal strong{
    font-weight: bold;
}
.principal em{
    font-style: italic;
}
.utencilios{
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}
.mapa{
    padding: 3em 0;
    background: linear-gradient(#FEFEFE,#222222);
}
.mapa p {
    margin: 0 0 2em;
    text-align: center;
}
.mapa-contenido{
    width: 940px;
    margin: 0 auto;
}
.diferenciales{
    padding: 3em 0;
    background: #222222;
    color:#FFFFFF;
}
.contenido-diferenciales{
    width: 700px;
    margin: 0 auto;
}
.lista-diferenciales{
    width:40%;
    display: inline-block;
    vertical-align:top ;
}
.items{
    line-height: 1.5;
}
.items:before{
    content: "٭ ";
}
.items:first-child{
    font-weight: bold;
}
.imagen-Diferenciales{
    width: 60%;
    transition: 400ms;
    box-shadow: 10px 10px 30px 15px black;
}
.imagen-Diferenciales:hover{
    opacity: 0.3;
}
.video{
    width: 700px;
    height: 400px;
    margin: 2em auto;
}

@media screen  and (max-width:480px){
    .caja, .principal, .contenido-diferenciales, .mapa-contenido, .video{
        width:auto;
    } 
    h1{
        text-align: center;
    }
    nav{
        position: static;
        width: 90%;
        margin: auto;
    }
    nav li{
        margin:auto;
    } 
    .principal{
        width: 80%;
        margin:auto;
    }
    .mapa-contenido{
        width:90%;
        margin:auto;
    }
    .lista-diferenciales{
        width: 100%;
        text-align: center;
    }
    .imagen-Diferenciales{
        display: block;
        width: 80%;
        margin: 30px auto;
    }
    .video{
        width: 90%;
        height: 200px;
        margin:auto;

    }

}