El color eligido en el background del bloque de diferenciales no me figura en la pantalla.

Yo hice paso a paso lo que el instructor enseña en la clase de gradientes, pero el color no me figura en la pantalla. Verifique más de una vez si pasó algo en mi código, pero no logré encontrar el error, por favor, ayúdame!

Bloque de diferenciales HTML

 <section cass ="diferenciales"> 

                <h3 class="titulo-principal">Diferenciales</h3>

                <div class="contenido-diferenciales">
                    <ul class="lista-diferenciales">
                    <li class="items">Atención personalizada a los clientes</li>
                        <li class="items">Espacio diferenciado</li>
                        <li class="items">Localización</li>
                        <li class="items">Profesionales calificados</li>
                        <li class="items">Puntualidad</li>
                        <li class="items">Limpieza</li>
                    </ul><img src="Banner/diferenciales.jpg" class="imagen-diferenciales">
                </div>

                <div class="vídeo">

                    <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

                </div>

            </section>

CSS home

.banner {
    width: 100%;
 }

 .principal {
    padding: 3em 0;
    background: #FEFEFE;
    width: 940px;
    margin: 0 auto;
}

.titulo-principal {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}

.principal p {
    margin: 0 0 1em;
}

.principal strong {
    font-weight: bold;

}

.principal em {
   font-style: italic;
}

.utensilios {
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.mapa {
    padding: 3em 0;
    background: linear-gradient(#FEFEFE, #888888);
}

 .mapa p{
    margin: 0 0 2em;
    text-align: center;
 }

 .mapa-contenido {
    width: 940px;
    margin: 0 auto;
}

 .diferenciales {
    padding: 3em 0;
    background: #888888;
}

.contenido-diferenciales {
    width: 640px;
    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%;
}

.vídeo {
    width: 560px;
    margin: 1em auto;
}