No Google Chrome a página fica certa, no Firefox quebra a tabela na section main; | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Pessoal, porque a página fica correta no Google Chrome e no Firefox não? Como que resolve essa questão?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Produtos - Barbearia Alura</title>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="produtos.css">        
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img src="_imagens/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>
            </div>
        </header>

        <main>    
                <ul class="produtos">
                    <li>
                        <h2>Cabelo</h2>
                        <img src="_imagens/cabelo.jpg">
                        <p class="produto-descricao">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="_imagens/barba.jpg">
                        <p class="produto-descricao">Corte e desenho profissional de barba</p>
                        <p class="produto-preco">R$18,00</p>
                    </li>
                    <li>
                        <h2>Cabelo + Barba</h2>
                        <img src="_imagens/cabelo+barba.jpg">
                        <p class="produto-descricao">Pacote completo de cabelo e barba</p>
                        <p class="produto-preco">R$35,00</p>
                    </li>
                </ul>            
        </main>

        <footer>
            <img src="_imagens/logo-branco.png">
            <p class="copyright"> Copyright Barbearia Alura</p>
        </footer>
    </body>
</html>

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    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: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;    
}

nav a:hover {
    color:  #C78C19;    
    text-decoration: underline;
}

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

}

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

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

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

.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:  2px solid #000000;
    border-radius: 10px;
}

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

.produto-descricao {
    font-size: 18px;
}

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

footer {
    text-align: center;
    background: URL("_imagens/bg.jpg");
    padding: 40px 0;
}

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px;
}

Olá Pedro, tudo bem?

Peço desculpas pela demora em dar o retorno.

Muitos podem ser os motivos para essa incompatibilidade, que é bastante comum entre os navegadores e suas versões. Para termos um projeto que se adapte em diversos browsers, é necessário fazer uma série de adaptações em nosso CSS, para que ele se comporte de maneira adequada em ambientes diferentes. Você pode dar uma olhada melhor sobre isso aqui.

Uma das adaptações necessárias, seria acrescentando o arquivo reset.css ao projeto. Algumas pessoas relatam problemas com o reset do Meyer, que acredito que seja o que você esteja utilizando, você pode testar com esse outro reset, o Normalize.

Como citei anteriormente, a incompatibilidade é comum devido as propriedades do CSS serem suportadas de maneiras diferentes em cada navegador.

Abraços!