Solucionado
Hya algo que no entiendo y es que el profe coge los codigos desde la herraminta de desarrollador , pero que significa el coger el . headerPrincipal-nav desde alli es decir no me queda claro para que sirve las herramientas como el style , el computed, layaout . Tengo entendido que la pimera parte donde estan los elementos vemos el codigo pero la segunda y tecera parte no etiendo para que sirve
En esa seccion puedes inspeccionar cualquier parte del codigo. Si seleccionas alguna en específico y luego te vas a las pestañas que mencionas podras ver mas informacion sobre el elemento seleccionado.
En styles por ejemplo puedes agregar o quitar alguna clase y ves los resultados directo en el navegador, si alguna modificación te convence entonces puedes copiarla y pegarla en tu codigo.
En computed puedes ver cuanto mide un elemento, cuanto margin o padding tiene entre otras cosas. Es una herramienta bastante buena y de mucha ayuda. Espero haber ayudado, saludos!