O terceiro Item do <li> não permanece na mesma linha | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Oi galera estou com um probleminha. o terceiro item da minha lista "Cabelo + Barba" sempre fica indo para a linha de baixo como se não tivesse espaço suficiente para ficar na mesma linha. Esse bug para quando coloco o "margin: 0 1.4%;" ao invés de "margin: 0 1.5%;" no "ul.produtos li"

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Produtos - Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="produtos.css">
    </head>
    <body>
        <header>
            <h1><img id="logo" src="logo.png"></h1>

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </header>
            <main>
                <ul class="produtos">
                    <li>
                        <h2>Cabelo</h2>
                        <img src="cabelo.jpg">
                        <p class="produto-desc">Na tesoura ou máquina, como o cliente preferir</p>
                        <p class="produto-preco">R$ 25,00</p>
                    </li>
                    <li>
                        <h2>Barba</h2>
                        <img src="barba.jpg" >
                        <p class="produto-desc">Corte e desenho profissional de Barba</p>
                        <p class="produto-preco">R$ 18,00</p>
                    </li>
                    <li>
                        <h2>Cabelo + Barba</h2>
                        <img src="cabelo+barba.jpg">
                        <p class="produto-desc">Pacote completo de Cabelo e Barba</p>
                        <p class="produto-preco">R$ 35,00</p>
                    </li>
                </ul>
            </main>
    </body>
</html>

CSS:

header {
    background: #b4b4b4;
    height: 300px;
}
img#logo{
    position: relative;
    top: 50px;
}
nav{
    width: 100%;
    background-color: white;
    position: absolute;
    top: 0;
}
nav ul{
    position: relative;
    padding: 10px;
}
nav li {
    display: inline;
    margin: 0 0 0 15px;
    padding: 8px;
    transition: 1s;
}
nav li:hover {
    display: inline;
    margin: 0 0 0 15px;
    background-color: rgb(153, 153, 153);
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
main{
    background-color: crimson;
}
ul.produtos{
    background-color: blue;
    width:75%;
    margin: 0px auto;
    padding: 50px 0px;
}
ul.produtos li{
    display: inline-block;
    border:solid 1px black;
    text-align: center;
    width: 30%;
    vertical-align: top;
    background-color: #CCCCCC;
    margin: 0 1.4%;

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

.produto-preco{
    font-size: 22px;
    font-weight: bold;
}
.produto-desc{
    font-size: 18px;
}

Mergulhe em programação