4
respuestas

Tengo una duda, pese a que seguí las instrucciones el último elemento,cabello y corte, se pasa a la siguiente línea y no entiendo porqué

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

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

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

.producto-precio {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}![](![Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad](https://cdn1.gnarususercontent.com.br/6/438047/5bf74db4-9c31-4351-97f4-207bedbcb709.png)  )
4 respuestas

Hola Katherine, estoy viendo que solo subiste tus estilos de CSS, podrías subir tu código HTML también para darme una idea y ver porque está saltando, Saludos.

Hola Edna, gracias por tu pronta respuesta!! ayer investigando descubrí que el error se debía al tamaño de mi pantalla por lo que lo sulucioné cambiando el width de 940 a 1080...no sé si sea una solución adecuada pero de momento funciona....el html es el siguiente:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Productos - Barbería Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <div class="caja">
            <h1><img src="imagenes/logo.png" alt=""></h1>
            <nav>
                <ul class="navegacion">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="productos.html">Productos</a></li>
                    <li><a href="contacto.html">Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <ul class="productos">
            <li>
                <h2>Cabello</h2>
                <img src="imagenes/cabello.jpg" alt="">
                <p class="producto-descripcion">Con tijera o máquina, a gusto del cliente</p>
                <p class="producto-precio">S/.25.00</p>
            </li>
            <li>
                <h2>Barba</h2>
                <img src="imagenes/barba.jpg" alt="">
                <p class="producto-descripcion">Corte y diseño profesiomal de barba</p>
                <p class="producto-precio">S/.15.00</p>
            </li>
            <li>
                <h2>Cabello + Barba</h2>
                <img src="imagenes/cabello+barba.jpg" alt="">
                <p class="producto-descripcion">Paquete completo cabello y barba</p>
                <p class="producto-precio">s/.40.00</p>
            </li>
        </ul>



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

</html>

hola Katherine, lo que hice yo fue en .productos li ( width: 30%;) reemplazarlo por 29% y se ajustó correctamente.

Saludos. -

Buen comentario