Produtos fora de ordem na tela do navegador

Olá Lucas, tudo bem? Eu tive o mesmo problema. Bem, eu não sei se resolvi da melhor maneira, mas deixei a página "apresentável". Vou passar o que fiz:

Aqui modifiquei o width, colocando em 29% para que o conteúdo pudesse caber nos 940px:

.produtos li {
    border: solid 2px black;
    border-radius: 50px;
    display:inline-block;
    text-align: center;
    vertical-align: top;
    box-sizing: border-box;
    margin: 20px 20px;
    width: 29%;
    margin: 0 1.5%;
}

Porém, olha como ficou feio, a descrição do produto "cabelo" fez com que o elemento ficasse maior que os outros.

Então diminui a fonte das descrições:

.produtos-descricao {
    font-size: 16px;
    padding: 20px 20px;;
}

E ficou assim... Mas ainda tenho dúvidas se essa é a melhor forma de resolver esse problema, ou se existe alguma maneira mantendo os 30% e a fonte 18. Espero ter ajudado. Abraço.