Ao passar o menu <nav> para a pagina principal a lista não fica em linha | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

index.html

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>    
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="produtos.css">

    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img 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>
            </div>
        </header>

        <main>
            <img src="banner.jpg" id="banner">
            <div class="principal">            
                <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

                <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

                <p id="missao">Nossa missão é: <em><strong>"Proporcionar auto-estima e qualidade de vida aos clientes".</strong></em></p>

                <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>    
            </div>    
            <div class="beneficios">        
                <h3 class="titulo-centralizado">Benefícios</h3>    
                <ul>
                    <li class="itens">Atendimento aos Clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais qualificados</li>
                </ul>
                <img src="beneficios.jpg" class="imgbeneficios">
            </div>
        </main>
        <footer>
            <img src="logo-branco.png">
            <p class="copyrights">&copy; Copyright Barbearia Alura – 2019</p>
        </footer>
    </body>
</html>

produtos.css

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

.caixa{
    position: relative;
     width: 940px;
     margin: 0 auto;
}

nav {
    position: absolute;
    top: 50%;
    right: 0px;
}

nav li {
    display: inline;
    margin-left: 15px;
}
nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

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

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

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

.produtos li:active {
    border-color: darkgreen;
}

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

.produtos li:active h2{
    font-size: 35px;
    color: darkgreen;
}

.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("bg.jpg");
    padding: 40px 0;

}

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

style.css

.titulo-principal {
    padding-left: 20px;
}

#banner {
    width: 100%;
}

.principal{
    background: #cccccc;
    padding: 30px;
}

.titulo-centralizado {
    text-align: center;
}

p {
    text-align: center; 
}
#missao {
    font-size: 20px;
}

em strong {
    color: red;
}

.itens {
    font-style: italic;
}

.beneficios {
    background: #ffffff;
    padding: 20px;
}

ul {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

.imgbeneficios {
    width: 50%;
}

Olá, se você observar, na sua folha de estilo style.css você acaba mexendo diretamente com a tag <ul> quando faz :

ul {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

Como no seu <header> você também faz uso da tag <ul>, ela acaba sofrendo essa alteração, além da que você aplicou em produtos.css. Então, acredito que acaba gerando algum conflito ou algo do tipo e, por isso, os elementos ficam um abaixo do outro. Para resolver isso, você pode, ao invés de mexer diretamente na tag <ul> em style.css, criar uma classe específica para isso, como por exemplo:

.ul-index {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

E indicar essa classe em produtos.htm:

            <ul class="ul-index">
                <li class="itens">Atendimento aos Clientes</li>
                <li class="itens">Espaço diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais qualificados</li>
            </ul>

Eu testei aqui e deu certo, espero ter ajudado! ^^