Refactorizando el código

Me apoyé con Chat GPT, tuvimos 2 iteraciones: 1 - Le pedí que refactorizara el código para que incluyera tags de HTML semánticas. Me entregó el código inicial ya con tags como header y nav. 2 - Le pedí que en la parte de nav las ligas aparecieran de forma horizontal. En este caso me sugirió usar flexbox para lograr esto y algunas opciones que deben ser incluídas en la hoja de estilo.

Van los 2 códigos, el del HTML refactorizado y la hoja de estilo con más opciones.

<header class="encabezado">
  <a href="/">
    <img class="encabezado__logo--icono" alt="Logo de la empresa" src="./img/logoproviblanca-1@2x.png" />
  </a>
  <nav class="encabezado__navegacion">
    <ul class="encabezado__navegacion--lista">
      <li><a class="encabezado__navegacion--elemento" href="#">Blog</a></li>
      <li><a class="encabezado__navegacion--elemento" href="#">Paquete de viaje</a></li>
      <li><a class="encabezado__navegacion--elemento" href="#">Contacto</a></li>
    </ul>
  </nav>
</header>

/* Estilo para el header */
.encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

/* Estilo para la navegación */
.encabezado__navegacion--lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* Muestra los elementos de la lista en línea */
}

.encabezado__navegacion--lista li {
  margin-right: 1.5rem; /* Espacio entre las opciones de navegación */
}

.encabezado__navegacion--elemento {
  text-decoration: none;
  color: #333; /* Ajusta el color a tu gusto */
  font-weight: bold;
}

.encabezado__navegacion--elemento:hover {
  color: #007BFF; /* Color al pasar el cursor */
}

/* Estilo para el logo */
.encabezado__logo--icono {
  height: 50px; /* Ajusta el tamaño del logo */
}