¿Cómo arreglar el Header? | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

Intente crear una pagina haciendo lo que el profesor explico en los videos pero sencillamente la parte del header no sirve esta no se muestra correctamente.

<body>
    <header>
        <div class="caja">
            <h1><img src="img/logo.png"></h1>
            <nav>
                <ul >
                    <li><a href="pageSesion.html">Iniciar Sesion</a></li>
                    <li><a href="pageComoJugar.html">Como Jugar</a></li>
                    <li><a href="pageAyuda.html">Ayuda</a></li>
                    <li><a href="pageCometarios.html">Centro de Comentarios</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>


.header{
background-color: black;
padding: 20px 0;

}

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

.nav{ position: absolute; top: 110px; right: 0; }

.nav li{ display: inline; margin: 0 0 0 20px; }

.nav a{ text-transform: uppercase; color: rgb(240, 211, 51); font-family: "Instrument Serif"; font-weight: bold; font-size: 20px; text-decoration: none; }

¿Cómo podría arreglarlo?.