Ajustar o Inline da Navegação

Olá, eu terminei o curso "HTML5 e CSS3 parte 2: Posicionamento, listas e navegação" a pouco tempo, ai eu decidi colocar a navegação que foi aprendida no curso na página Home, ficou assim Por alguma razão o "Contato" ficou em baixo, queria saber se tem como deixar ao lado do outro.

HTML

<header>
                <h1 class="titulo-principal">Barbearia Alura</h1>
                <div class="caixa">
                    <ul class="navega">

                        <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>
                </div>
</header>

CSS

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

.navega {
    position: absolute;
    right: 0;
    top: 0;
}

.navega li {
    display: inline;
    margin: 0 0 0 15px;
}

.navega a {
    text-transform: uppercase;
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
} 

.navega a:hover {
    color: #c78c19;
    text-decoration: underline;
}