Lo aprendido en clase

Solo incluyo la parte de las nuevas secciones que hemos incorporado para evitar tanto texto:

  <section class="mapa">
            <h3 class="titulo-Principal">Nuestra ubicación</h3>
            <p>Nuestro establecimiento esta ubicado en el corazón de la ciudad</p>
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3762.4365352220893!2d-99.157100133749!3d19.436736919052386!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d201e1a9788123%3A0xa83028dc76da793c!2sBarcel%C3%B3%20M%C3%A9xico%20Reforma!5e0!3m2!1ses-419!2smx!4v1684133086440!5m2!1ses-419!2smx"
                width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"></iframe>

        </section>

        <section class="diferenciales">
            <h3 class="titulo-Principal" s">Diferenciales</h3>
            <ul>
                <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>
            </ul>

            <img src="diferenciales/diferenciales.jpg" alt="un barbero cortando barba" class="imagenDiferenciales">
        </section>
        <div class="video">
            <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; web-share"
                allowfullscreen></iframe>
        </div>

Ademas de la parte del CSS:

.mapa {
    padding: 3em 0;
}

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

}

.video {
    width: 560px;
    margin: 1em auto;
}

.imagenDiferenciales {
    width: 60%;
}