Cual seria la forma correcta de hacer el header menos ancho, mover de posicion el logo, y mover de posicion los item list? | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

Tengo el siguiente codigo, al verlo en la web este me muestra el logo en un area que no pegado a la izquierda, sino con un espacio en la izquierda y luego el logo, eso no es lo que quiero, yo lo quiero pegado a la izquierda, lo otro que me gustaria es tener un ancho menor en el header respecto al eje Y, y que los <il> esten pegados en la derecha. En este caso entiendo que como quiero hacer menos ancha la navbar pues tendría que cambiar de tamaño la imagen, etc. Me gustaria saber cual seria la forma correcta y ordenada de hacer esto.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/projects.css">
    <title>Projetcs</title>
</head>

<body>
    <header>
        <div class="box">
        <h1>
            <img src="images/logo.png" alt="logo-image">
        </h1>

        <nav> 
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="projects.html"> Portfolio</a></li>
                <li><a href="cv.html">CV</a></li>
                <li><a href="cv.html">Contact</a></li>
            </ul>
        </nav>
    </div>
    </header>
</body>

</html>

css

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

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