Avance lento

Para que me quede centrado el mapa y el video tuve que cambiarlos porque si ponia los valores que indicaba el profesor no quedaba como en el ejemplo. No quedo igual, pero se acerca bastante. Me cuesta darme cuenta y algunos consejos me retrasan mas en la práctica

HTML

 <section class="mapa"> 
                <h3 class="titulo-principal">Nuestra ubicación</h3>
                <p>Nuestro establecimiento esta ubicado en el corazón de la ciudad</p>

                <div class="mapa-contenido">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.4078401372108!2d-46.6346381!3d-23.589702!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5bd9bb943bf5%3A0x6f642995c970f0fe!2scaelum%20alura!5e0!3m2!1ses-419!2sar!4v1673192733151!5m2!1ses-419!2sar" width="950" height="450" frameborder="0"style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>

            </section>

            <section class="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="diferenciales/diferenciales.jpg" class="imagen-diferenciales">
                </div>
                <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> 

            </section>



        </main>

        <footer>
            <img src="imagenes/logo-blanco.png">
            <p class="copyright">&copy Copyright Barbería Alura - 2020</p>
        </footer>

    </body>
</html>

` Css3

td,th{ border: 1px solid #000000; padding: 8px 15px; }

/Aqui inicia el CSS para nuestro 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; }

p:first-line{ font-style: italic; }

.principal strong{ font-weight: bold; }

.principal em{ font-style: italic; }

.utensillos{ 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; } .titulo-principal{ text-align: center; font-size: 2em; margin: 0 0 1em; clear: left; color: rgba(0, 0, 0, 0.3); }

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

.contenido-diferenciales{ width: 640px; margin: 0 auto;} /* si los dejo modifica el diseño .lista-diferenciales{ padding: 3em 0; background: #888888; } */

.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 #000000; }

.imagen-diferenciales:hover{ opacity: 0.3; }

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

@media screen and (max-width:400px){ hi{ text-align: center; }

nav{
    position: static;
}

.caja, .principal, .mapa-contenido, .contenido-diferenciales, .video{ width: auto; } .lista-diferenciales, .imagen-diferenciales{ width: 100%; } }