Dudas con

Hola, el <div> se utiliza para agrupar por bloques cada contenido de la pagina y asi sea mas facil al momento de dar formato con CSS a cada contenido d su seccion, ya que conforme sigas avanzando encontraras que centrarlo puede ser un dolor de cabeza jajajaja esto es spoiler.

tu solo recuerda que esto ayuda a tener mejor estructura y agrupar cada contenido por bloques.

espero no haberte confundido mas.

https://github.com/MGJORGEI

NOTA: Si esto te ayudo no olvides marcarlo como solucion.

Hola Fernanda, como estás?

En este caso es necesario crear una etiqueta div (div Sirve para agrupar contenidos) para poder encapsular en un bloque el logo y la tag nav, ya que, esta etiqueta solo apunta para:

 <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="productos.html">Productos</a></li>
            <li><a href="contacto.html">Contacto</a></li>
        </ul>
    </nav>

Y no abraça el contenido del logo. Lo cual es necesario para poder posicionar el logo junto con nav.

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

Y se trabajan por separado pues cada bloque tiene algunas características particulares como el padding, que es el espacio que tiene un elemento, a partir de la borda hacia dentro; que es diferente del margin, que es el espacio que tiene un elemento desde la borda hacia afuera.

Me sumo a la consulta, leyendo la respuesta de José...si en lugar de dar formato a la clase 'caja' se crea el selector 'header' en el archivo css, no sería lo mismo?

Será que el uso de la etiqueta div y al crear la clase 'caja' lo que se está haciendo es agrupar los elementos logo+links bajo un criterio de buenas prácticas, teniendo en cuenta que en otras situaciones puede que nuestro código tenga más elementos dentro del header?

Agradecería una respuesta a ver si estoy interpretando correctamente el porqué se usa div class="caja" y no header para crear el selector de css.

Esto me dió dolores de cabeza,no entendía nada hasta que investigué un poco, espero que le sirva a alguien.

Hay que entender que CSS funciona en bloques.Cuando ponemos por ejemplo un h1 o un header aunque no se vea estamos creando bloques.Cada bloque está ocupando una posición, en este caso un logo y un menú que se posicionan en referencia a su contenedor Header (contenedor padre). La idea es centrar los dos elementos,el problema es que cada elemento maneja su propio espacio y por lo tanto diferentes propiedades, "¿podría centrarlos por separado, usando un selector desde el header ?" -Sí, podría darle un margen de 200px por ejemplo, pero a la hora de visualizar en otros dispositivos saldría descuadrado,no sería eficiente.Para evitar eso, la solución que se propuso en este caso fue crear un div(caja) o sea otro bloque con el objetivo de contener a dichos elementos. Ahora que el logo y el menú están contenidos por la caja -div- que se creó de 940px width -medidas recomendadas- todo lo que se le haga le va a afectar a los dos elementos por igual(padding,margin,align,etc) .Observar que la caja ahora está contenida por el header y es aquí cuando ésta cobra sentido,esta caja -div- ahora se puede centrar tomando como referencia a su padre Header.Solo quedaría centrar con un margin a los costados en automático para que se adapte a cualquier pantalla. Recomiendo profundizar/investigar sobre herencias en Css, diferencias entre inline-block y posicionamiento.

Cuando veamos flexbox, esto va a ser muy simple de solucionar, asi que no te enrosques demasiado

Gracias Miguel y Jorge por sus aportes, la explicación con las cajas de colores me ayudó a ver mejor el concepto. Excelente respuesta!