alinear bloques

Los bloques se alinean por la propiedad display, .productos li { display: inline-block;} , creo que el siguiente artículo puede ayudarte a comprenderlo visualmente: https://www.campusmvp.es/recursos/post/Que-diferencias-hay-entre-display-block-inline-e-inline-block-en-CSS.aspx

me referia al bloque en vertical, antes de agregar el padding: 30px 20px en la linea 44 los cuadros estan desproporcionados y despues de agregarlos se arreglan, en el video creo que lo explica pero no logre entender

header{
    background-color: #BBBBBB;
    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;
}

.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%;
    background-color: #CCCCCC;
    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;
}

Gracias por la imagen, lo que hace es recortarle espacio a los lados a las tarjetas, haciendo que todos los textos estén en dos líneas por decirlo así (no sólo el de la primera tarjeta, como en la primera imagen; este texto: con tijera o maquina...) , haciendo que los elementos ya centrados dentro de sus tarjetas, queden alineados con lo de los demás, si le quitas barba a la segunda o tercera tarjeta verás más claro lo que te expongo, dejando las propiedades como están, sólo modificando el html. Te anexo una imagen del padding.

En la imagen siguiente le quite barba y como el texto no es de dos líneas sino de una, ya no están alineados.