Aprendiendo | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

Utilizando un la etiqueta div

<!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="/reset.css">

<!--
reset.css"> Esta etiqueta se deb colocar antes del 
css de nuetra pagina porque en el caso contrario hay problemas


-->

     <link rel="stylesheet" href="/Styloproductos.css">

    <title>Document</title>
</head>

<body>

<header>


    <div class="caja">
        <h1> <img src="/imagenes2/logo.png" alt=""></h1>   
        <nav>
            <ul>
                <li><a href="/index.html">Home</a></li>
                <li><a href="">Productos</a></li>
                <li><a href="">Contacto</a></li>
             </ul>
        </nav>


    </div>



</header>
</body>
</html>

css muy interesante el uso de esta etiqutas para mover las cajas dentro de nuetra pagina web

header{
    background-color: #bbbbbb;
    padding: 20px 0;
}
.caja{

    /*     El tamaño de la pantalla*/
    width: 940px;
    position: relative;
    margin: 0 auto;

}

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






nav li{   /*   estiqueta que cambia el comportamiento display en la lista      */
    display: inline;
 margin:0 0 0 15px ;
}

nav a{
    /* etiqueta que sirbe oara colocar los textos en mayuscula*/
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
/* negrilla en las letras*/

    font-size: 22px;
/* fin-size altera el tamaño del a pagina */
text-decoration: none;


}