Duda

realize un ejercicio con imagenes diferentes pero las imagenes no me quedan todas iguales este es el codigo.

    </main>
        <ul class="productos">
            <li>
                <h2>teclado</h2>
                <img src="imagen/teclado.jpg">
                <p class="prod-descripcion">teclado con estilos divertidos</p>
                <p class="prod-precio">15.000</p>
            </li>
            <li>
                <h2>mouse</h2>
                <img src="imagen/mouse.jpg">
                <p class="prod-descripcion"> inalambrico de varios colores</p>
                <p class="prod-precio">12.000</p>
            </li>
            <li>
                <h2>computador</h2>
                <img src="imagen/computador.jpg">
                <p class="prod-descripcion"> computador de marca dell</p>
                <p class="prod-precio">2.000.000</p>
            </li>
        </ul>  
    </main>

    ***** codigo css

    header{
background-color: #BBBBBB;   
padding: 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:black; 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; background: #cccccc; margin:0 1.5%; padding: 30px 20px; box-sizing: border-box;

}

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

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