No se el porque no me lo deja tal cual en la imagen ya revise el código ,aclaro que las imagenes <main> deben estra centradas

<header>
    <div class="caja">
       <h1><img src="Imagenes/logo.png" ></h1>
    <nav>

        <ul>
            <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">
        <p class="producto-descripcion">Con tijera o maquina, a gusto del cliente</p>
        <p class="producto-precio">$ 10.00</p>

    </li>

        <li>
         <h2>Barba</h2>
        <img src="Imagenes/barba.jpg">
        <p class="producto-descripcion">Corte y diseño profesional de barba</p>
        <p class="producto-precio">$ 8.00</p>

        </li>

        <li>
            <h2>Cabello + Barba</h2>
        <img src="Imagenes/cabello+barba.jpg">
        <p class="producto-descripcion">Paquete completo de cabello y barba</p>
        <p class="producto-precio">$ 15.00</p>

        </li>   
    </ul>

</main>

header{ background-color: #bbbbbb; pad: 20px 0;

}

.caja{ width: 940px; position: relative; margin: 0 auto; }

nav{ position: absolute; top:110px; right: 0;

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

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

display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;

}

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

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

}