Hola Cesar, ¿puedes compartir tu código html para revisar como apoyarte con tu consulta?

Saludos.

    <main>            
        <section class="principal">
            <h2 class="titulo-principal">Sobre la Barbería Alura</h2>
            <img class="utensilios" src="imagenes/utensilios.jpg" alt="imagen de referencia">
            <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae para el mercado lo que hay de mejor para su cabello y barba. Fundada en 2020, la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes diariamente.</p>
            <p id="mision"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a nuestros clientes"</strong>.</em></p>
            <p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el mundo de la moda, para así ofrecer a nuestros clientes las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes.</p> 
        </section>
        <section>
            <section class="mapa">
                <h3 class="titulo-principal">Nuestra Ubicación</h3>
                <p>Nuestra Barbería se encuentra ubicada en el corazón de la ciudad</p>
               <!--el mapa me toco retirarlo para que entrara el cod en el foro-->
            </section>
        <section class="diferenciales">
            <div class="contenido-diferenciales">
                <h3 class="titulo-principal">¿Qué nos hace diferentes?</h3>            
                <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"> Límpieza</li>
                </ul>                    
                <img src="diferenciales/diferenciales.jpg" class="imagen-diferenciales" alt="imagen de referencia">
            </div>
            <div class="video">
                <iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/8pWtdanVz3I?start=78" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div>
                <table>
                    <thead> <!--sirve para  dar encabezado a la tabla-->
                        <tr> <!--table row indica filas de la tabla-->
                            <th>Dias de atencion</th> 
                            <th>Horarios de Atencion</th>
                        </tr>
                    </thead>
                        <tbody> <!--esta etiqueta da cuerpo a la tabla-->
                        <tr>
                            <td>Lunes</td> <!--permite ingresar txt a las filas-->
                            <td>De 08:00 am ~ 08:00 pm</td>
                        </tr>
                        <tr>
                            <td>Miércoles</td>
                            <td>De 08:00 am ~ 08:00 pm</td>>
                        </tr>
                        <tr>
                            <td>Viernes</td>
                            <td>De 08:00 am ~ 08:00 pm</td>
                        </tr>
                    </tbody>
                </table> 
            </div>
        </section>                                               
            </main>
        </html>

este es el css

body{ font-family: 'Courgette', cursive; color: black; }

header{ background-color: #7a61ab; padding: 20px 0 ; }

.caja{ width: 940px; position: relative; margin: 0 auto; } nav{ position: absolute; top: 110px; right: 0px; }

nav li{ display: inline; margin: 0 0 0 15px; }

nav a{ text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }

nav a:hover{ text-decoration: underline; font-size: 24px; }

.productos{ width: 940px; margin: 0 auto; padding: 50px; } .productos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border-color: #000000; border-width: 2px; border-style: solid; border-radius: 25px; } .productos li:hover{ border-color: blue; }

.productos li:active{ border-color: orange; }

.productos h2{ font-size: 30px; font-weight: bold; }

.productos li:hover h2{ font-size: 33px; }

.producto-descripcion{ font-size: 18px; }

.producto-precio{ font-size: 25px; font-weight: bold; margin-top: 10px; }

footer{ text-align: center; background: url(imagenes/bg.jpg); padding: 40px; }

.copyrigth{ color: yellow; font-size: 13px; margin: 20px; }

form{ margin: 40px 0; }

form label, form legend{ display: block; font-size: 20px; margin: 10px 10px 10px; font-style: italic; font-weight: bold; }

.input-padre{ display: block; margin: 0 0 20px; padding: 10px 30px; width: 50%; }

.horario{ padding: 10px 0; } option{ font-style:normal; font-weight: bolder; }

.checkbox{ margin: 30px 0; } .enviar{ width: 40%; padding: 15px 0; font-size: 18px; font-style: italic; font-weight: bold; color: aquamarine; background: #007fff; border: none; border-radius: 20px; transition: 1s all; cursor:pointer; }

.enviar:hover{ background: purple; color: whitesmoke; transform: scale(1.1); }

table{ margin: 20px auto; transition: 1s all; width: 45%; text-align: center; padding: 15px 30px; }

thead{ background: orange; font-weight: bold; font-style: italic; font-size: 24px; }

td, th{ border: 2px solid black; }

td{ background: #BBBBBB; font-style: oblique; font-weight:bolder; font-size: 20px; }

table:hover{ transform: scale(1.1); } // inicio de home .banner{ width: 100%; }

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

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

.titulo-principal::first-letter{ font-weight: bold; }

.principal p{ margin: 0 0 1em; text-align: center; }

.principal strong{ font-weight: bold; font-style: italic; }

.principal em{ font-style: italic; }

.utensilios{ width: 160px; float: left; margin: 0 20px 20px 0; border-radius: 20px; }

.mapa{ padding: 3em 0; background: linear-gradient(#e8d8ff , #7250c0); }

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

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

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

.contenido-diferenciales{ width: 640px; margin: 0 auto;

}

.lista-diferenciales{ width: 38%; display: inline-block; vertical-align: top; }

.items{ line-height: 2em; font-style: italic; }

.items:before{ content: "٭"; }

.items:after{ content: "٭"; }

.items:nth-child(1){ font-weight: bold;}

.imagen-diferenciales{ width: 58%; border-radius: 15px; }

.imagen-diferenciales:hover{ border-radius: 30px; opacity: 0.5; transition: 700ms; box-shadow: 10px 10px 30px 8px black; }

.video{ width: 560px;/tamaño del video/ margin: 2em auto; background: linear-gradient(#7250c0, #e8d8ff) }

@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 Cesar, no logro determinar bien lo que sucede , pero intenta con lo siguiente si gustas:

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

Quitar el width: Auto de .principal , dado que desde más arriba se declara en 940px.

Espero que mis respuesta te sirve de ayuda.

Saludos y exito en el estudio

saludos Erick;

Ya cambie lo que me sugeriste, pero como puedes ver, se movio a la izquierda de la pantalla presentando la misma falla... he intentado muchas cosas pero la verdad persiste el error y no logro descifralo...

gracias por tu sugerencia...

hola revolviste las pages tienes que entender que lo que haga en el style.css es para todos los que lo coloque pero ahi esta mal la identacion y tines revuelto index con contacos