@MEDIA - MOBILE (produtos)

Olá tudo bem?

Na parte de produtos a lista de "Cabelo + Barba" na versão mobile está fora de enquadro (borda, margem) ele fica um pouco menor, comparado com os outros. Ele fica igual quando eu tiro o (display: inline-block) do CSS mas se eu tiro interfere a versão PC. O que eu faço?

OBS: Cabelo e Barba quando eu passo o mouse aparece Li 349,22 x 437,31 no Cabelo + Barba Li 329,22 x 417,31. Não estou sabendo corrigir.

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;


}
.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 3px solid #000000;
    border-radius: 10px; 
}

.produtos li:hover {
    border-color: #C78C19;

}

.produtos li:active {
    border-color: #C88C19;
}

.produtos li:hover h2{
    font-size: 35px; 
}

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

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10%;
}