Problemas de maquetación de "Personal Portfolio"

[primal prairie]

Si quieres alinear el Navbar. ¿Podrías mostrarnos el HTML y CSS de ese apartado?

Y también una idea de como lo quieres alinear o resolver

[boreal fractal]

Vale

@primal prairie

html // css

[primal prairie]

Una de las cosas que veo es que .es que la lista de enlaces las tienes en el HTML como nav__links y en el CSS tratas de estilarlas como .nav-links. Esa es la razón por la que no se eliminan los bullets del listado.

¿El listado de enlaces quieres que estén alineados horizontalmente?

Si quieres que el logo y los enlaces estén centrados verticalmente. .header .nav debe tener display: flex y en lugar de align-content: center sería align-items: center

.header .nav {
  display: flex;
  margin: 10px;
  padding: 5px;
  align-items: center;
  justify-content: center;
}

Ahora, si los enlaces quieres que estén en fila y no apilados. nav__links también debería tener display: flex o cambiar el display de los li por inline o inline-block.

.header .nav__links{
  display: flex;
}

/*O tambíen*/
.nav__links li{
  display: inline-flex; /*por defecto tienen un display de list-item*/
}

[boreal fractal]

vale

pues quiero algo asi

[primal prairie]

Con los cambios que te mencione debería funcionar.

[boreal fractal]

asi?

[primal prairie]

Solo tocaría cambiar el justify-content del .header .nav a space-between.

.header .nav {
...
  justify-content: space-between;
}

[primal prairie]

No elimines el .header .nav Por que es ahí donde vas a conseguir el layout que buscas

[boreal fractal]

ya lo puse

asi me quedó

[primal prairie]

Recuerda que el .header .nav tambien debe llevar display: flex

[boreal fractal]

ahh

[primal prairie]

Exacto, ahora. La razón por la que el logo y los enlaces se van a los laterales, es por el space-between, que literal "deja un espacio equidistante" entre los elementos hermanos (nav_logo y nav_links)

[boreal fractal]

ahh

[primal prairie]

Si quisieras que los enlaces esten en el centro podrías agregar un tercer elemento, pero vacío; en el nav

<header class="header">
  <nav class="nav">
    <div class="nav__logo">
      ...
    </div>
    <ul class="nav__links">
      ...    
    </ul>
    
    <div></div>

  </nav>
</header>

Eso usando flex. Otra opción es usar display: grid en el .header .nav y definir tres columnas.

.header .nav{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  ...
  align-items: center;  
  /*"justify-content: space-between" ya no sería necesario*/
}

[boreal fractal]

ya miro

le puse eso (lo ultimo) y sigue igual

[primal prairie]

¿Me podrías mostar?

[boreal fractal]

ya voy

[primal prairie]

¿Y en el inspector de elementos como aparece?

[boreal fractal]

hmm

no sale

[primal prairie]

Seleciona el .header .nav en el inspector. Ahí estas seleccionando el header completo.

[boreal fractal]

yaya

[primal prairie]

No se aplicaron los últimos cambios (los del grid)

Prueba recargando la página o reiniciando el localhost. 😅

[boreal fractal]

ok

ya