pequeño error

código Css

header{
    background-color: #BBBBBB;
    padding: 20px 0;
    /*height: 300px; agregado */
}

header a:hover{
    color: aqua;
    text-decoration: underline;
}

.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;   /*para que utilizamos uppercase?*/
    color: black; 
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

/*header a :hover{
    color:#c78c19;
    text-decoration:underline ;  NO FUNCIONÓ ESTE CODE
}*/

.productos{
    width: 940px;
    margin: 0 auto;
    padding: 50px;


}

.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
   /* background: #CCCCCC       solo lo usamos para identificar el marco del item con el color agregado*/
    margin: 0 1.5%;             /*para separar de la zona vertical y zona lateral del espaciamiento de los items, 0 vertical y 1.5 laterales */
    padding: 30px 20px;         /*para dar espaciamiento interno del item  */
    box-sizing: border-box;     /* tamaño de la caja*/
    height: 30rem;              /*altura del box-items*/
    border: 2px solid #000000;
    /*border-top-left-radius:10px;
    border-top-right-radius:10px ;
    border-bottom-right-radius:10px ;
    border-bottom-left-radius:10px ;*/   /* o tambien podemos utilizar todos los border-radius en un solo lugar como lo haré abajo de esta linea */

    border-radius:10px;        /*para darle el bordem esquinero al marco de cada item de productos */

    /*border-color:#000000;     tambien puede realizarse asi el borde de nuestros items
    border-width: 2px;
    border-style: solid;        linea solida del marco */
}

.productos li:hover{
    border-color: #c78c19;
    /*font-size: 33px; */
}

.productos li:active {
    border-color: #088c19;
}

.productos h2{
    font-size: 30px;            /*con font-size se cambia el tamaño de la letra */
    font-weight: bold;
}

.productos li:hover h2{         /*lo que hace aqui este efecto es cuando paso el mouse sobre el item entonces sus letras aumentara un poco y hace ese efecto*/
    font-size: 33px;
}

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

.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;          /*para separar la descripcion producto - precio */
}

footer{
    text-align: center;
    background: url(imagenes/bg.jpg); /*usamos url para indicar la ruta de la imagen para el bg del pie de pagina */ 
    padding: 40px;
}

.copyright{
    color: #ffffff;
    font-size: 13px;
    margin: 20px;
}

main{                       /*para centralizar los items de formularios*/
    width: 940px;
    margin: 0 auto;
}

form{
    margin: 40px 0;
}

form label,form legend{           /*estamos usando 2 etiquetas diferentes pero aplicamos el mismo estilo */      
    display: block;
    font-size: 20px;
    margin: 0 0 10px;           /*0 para arriba 0 a la derecha y 10px para abajo*/
}

.input-padron{
    display: block;
    margin: 0 0 10px;           /*0 para arriba 0 a la derecha y 10px para abajo*/
    padding: 10px 25px;         /*10 px para superior e inferior y 25px para los costados*/
    width: 50%;                 /*para darle mas anchura a las celdas del formulario, el boton esta siendo afectado tambien "enviar formulario*/
}

.checkbox{
    margin: 20px 0;
}

.enviar{
    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: orange;
    border: none;
    border-radius: 5px;
    transition: 1s all;
}

.enviar:hover{
    background:darkorange;
    /*cursor:pointer; 
    transform: scale(1.2); 
}

table{
    margin: 40px 40px;
}

thead{
    background:#555555 ;
    color: white;
    font-weight: bold;
}

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

/*aqui inicia el Css para nuestra home*/
.banner{
    width:100%;
}

.titulo-principial{
    text-align: center;
    font-size: 2em; /*estoy diciendole hagamos 2 veces más del tamaño prederterminado*/ 
    margin: 0 0 1em;
    clear: left;
}

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

.principal strong{
 font: bold;
}

.principal em{
    font-style: italic;
}

.utensilios{
    width: 120px;
    float: left; /*uso float para que la imagen utensilios se me ubique en la zona 
    izquierda de la pantalla y el texto al lado de ella*/
    margin: 0 20px 20px 0; /*0 para arriba 20 para la derecha,0 para inferior, 0 para izquierda */
}

.imagenDiferenciales{
    width: 60%;

pantallazo de imagen, el error se encuentra en la zona del titulo "SOBRE LA BARBERIA" no me aparece en mayúsculas el titulo y quiero que aparezca tal cual como el del profesor .

Buenas en tu archivo css, el título que querés modificar figura como:

.titulo-principial{
    ...
}

el error está en que dicha clase no existe, debido al error de tipeo en ".titulo-principial", deberías cambiarlo a ".titulo-principal" como está en el html.

Espero haber sido de ayuda, de ser así no olvides marcar como solucionado. Saludos :)

hola , ya hice lo que me pediste pero sigue igual.

Aparentemente había otro problema. Si revisas bien la siguiente sección del código del css, en ".enviar:hover" falta una llave de cierre ya que el comentario la estaría obviando.

.enviar:hover{
    background:darkorange;
    /*cursor:pointer; 
    transform: scale(1.2); 
}
...

Para que funcione correctamente es tan simple como agregar una llave de cierre:

.enviar:hover{
    background:darkorange;
}

jeje sigo con el problema. estoy tratando de mirar el error pero no lo hallo sinceramente, sigue igual mi programa sin ver cambios nuevos.

Mmm, guardaste los cambios y recargaste la página? podrías adjuntar el código nuevo?

si ya te muestro html

<!DOCTYPE html>

<html lang="es">

    <head>

        <meta charset="UTF-8">
        <title>Barberia Alura</title>
        <link rel="stylesheet" href="reset.css"> 
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">

    </head>

    <body>

        <header>
            <div class="caja">
                <h1><img src="imagenes/logo.png" alt="logo de la barberia Alura"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="productos.html">Productos</a></li>
                        <li><a href="http://wwww.google.com">Contacto</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <img class="banner" src="banner/banner.jpg">

        <main>
            <section class="titulo-principal">  

                <h2 class="titulo-principal">Sobre la Barbería Alura</h2>
                <img class="utensilios" src="imagenes/utensilios.jpg" alt="utensilios de un barbero">

                <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 class="mapa">
                <h3 class="titulo-principal">Nuestra ubicación</h3>
                <p>Nuestro establecimiento está ubicado en el corazón de la ciudad</p>
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d457.0568963132111!2d-46.632417548048885!3d-23.58800350580703!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Education%20and%20Innovation!5e0!3m2!1ses-419!2sdo!4v1655527404423!5m2!1ses-419!2sdo" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>            </section>
            <section class="diferenciales">

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

                <div class="contenido-diferenciales">
                    <ul class="lista-diferenciales">
                        <li class="items">Atencion personalizada a los clientes</li>
                        <li class="items">Espacio diferenciado</li>
                        <li class="items">Localizacion</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>  
            </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" allowfullscreen></iframe>
            </div>


        </main>

        <footer>
            <img src="imagenes/logo-blanco.png" alt="logo de la barberia Alura">
            <p class="copyright">&copy; Copyright BarBeria Alura 2022</p>
        </footer>

    </body>

</html>

Css

body{
    font-family:'Monteserrat','sans-serif';
}

header{
    background-color: #BBBBBB;
    padding: 20px 0;
    /*height: 300px; agregado */
}

header a:hover{
    color: aqua;
    text-decoration: underline;
}

.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;   /*para que utilizamos uppercase?*/
    color: black; 
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

/*header a :hover{
    color:#c78c19;
    text-decoration:underline ;  NO FUNCIONÓ ESTE CODE
}*/

.productos{
    width: 940px;
    margin: 0 auto;
    padding: 50px;


}

.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
   /* background: #CCCCCC       solo lo usamos para identificar el marco del item con el color agregado*/
    margin: 0 1.5%;             /*para separar de la zona vertical y zona lateral del espaciamiento de los items, 0 vertical y 1.5 laterales */
    padding: 30px 20px;         /*para dar espaciamiento interno del item  */
    box-sizing: border-box;     /* tamaño de la caja*/
    height: 30rem;              /*altura del box-items*/
    border: 2px solid #000000;
    /*border-top-left-radius:10px;
    border-top-right-radius:10px ;
    border-bottom-right-radius:10px ;
    border-bottom-left-radius:10px ;*/   /* o tambien podemos utilizar todos los border-radius en un solo lugar como lo haré abajo de esta linea */

    border-radius:10px;        /*para darle el bordem esquinero al marco de cada item de productos */

    /*border-color:#000000;     tambien puede realizarse asi el borde de nuestros items
    border-width: 2px;
    border-style: solid;        linea solida del marco */
}

.productos li:hover{
    border-color: #c78c19;
    /*font-size: 33px; */
}

.productos li:active {
    border-color: #088c19;
}

.productos h2{
    font-size: 30px;            /*con font-size se cambia el tamaño de la letra */
    font-weight: bold;
}

.productos li:hover h2{         /*lo que hace aqui este efecto es cuando paso el mouse sobre el item entonces sus letras aumentara un poco y hace ese efecto*/
    font-size: 33px;
}

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

.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;          /*para separar la descripcion producto - precio */
}

footer{
    text-align: center;
    background: url(imagenes/bg.jpg); /*usamos url para indicar la ruta de la imagen para el bg del pie de pagina */ 
    padding: 40px;
}

.copyright{
    color: #ffffff;
    font-size: 13px;
    margin: 20px;
}

main{                       /*para centralizar los items de formularios*/
    width: 940px;
    margin: 0 auto;
}

form{
    margin: 40px 0;
}

form label,form legend{           /*estamos usando 2 etiquetas diferentes pero aplicamos el mismo estilo */      
    display: block;
    font-size: 20px;
    margin: 0 0 10px;           /*0 para arriba 0 a la derecha y 10px para abajo*/
}

.input-padron{
    display: block;
    margin: 0 0 10px;           /*0 para arriba 0 a la derecha y 10px para abajo*/
    padding: 10px 25px;         /*10 px para superior e inferior y 25px para los costados*/
    width: 50%;                 /*para darle mas anchura a las celdas del formulario, el boton esta siendo afectado tambien "enviar formulario*/
}

.checkbox{
    margin: 20px 0;
}

.enviar{
    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: orange;
    border: none;
    border-radius: 5px;
    transition: 1s all; /*cuando ponga el cursor sobre Enviar Formulario se vea la transicion de color agregago 
    y el all es para darle el efecto a todas las caracteristicas agregadas a este campo*/
}

.enviar:hover{
    background:darkorange;

    transform: scale(1.2); 
}

table{
    margin: 40px 40px;
}

thead{
    background:#555555 ;
    color: white;
    font-weight: bold;
}

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

/*aqui inicia el Css para nuestra home*/
.banner{
    width:100%;
}

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

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


.principal strong{
 font: bold;
}

.principal em{
    font-style: italic;
}

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

.mapa{
    padding:3em 0;
}
.mapa p{
    margin: 0 0 2em;
    text-align: center;
}
.imagen-diferenciales{
    width: 60%;
}

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

Buenas, nuevamente cometiste el mismo error:

Arreglando eso debería funcionar correctamente.

hola, la verdad no entiendo cuando me dices que cometí el mismo error, entonces queria que si me puedes señalar especificamente para darme cuenta, he visto el coidgo mio a lo que tu me enviaste y lo tengo todo igual y no sé cual seria el error de mi programa, entonces te lo agradeceria.

".titulo-principial"

gracias