css – Como deixar a lista lado a lado? HTML e CSS3

inserir a descrição da imagem aqui

Gostaria de deixar dessa maneira o “Home, produtos e Contato” no entanto só fica dessa outra maneira. Já tentei de tudo e não consigo colocar lado a lado:
inserir a descrição da imagem aqui

HTML: “”

<head>
    <meta charset="UTF-8">
    <title> Barbearia Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">

    
</head>
<body>
    <header>
        <div  class="caixa">
       <h1> <img src="https://pt.stackoverflow.com/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>""

CSS3:
“”#banner {
width: 100%;
}
header {
background: #BBBBBB;

}

.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;
}””