Ayuda posicionamiento nav-bar

Como puedo poner la nav-bar en el centro, con la mitad de tamaño de ancho? Osea, que no ocupe toda la pantalla de ancho
justify-content: center, place-items: center, y más…he intentado todo lo que se me ocurre posible.
Gracias

Hay dos problemas para solucionar:

  1. la anchura
    Para esto basta anadir width: 50vw; al .nav-bar-ul
  2. la posicione.
    Esto es un poco mas complicado:
    veo un error en tu codigo. Estas ententando utilizar css-grid. Pero para utilizarlo tienes que anadir display:grid en tu css por ejemplo:
nav {
display :grid
}

con esto deberias poder hacerlo tu proprio, pero si tienes mas alguna dificuldade basta pedir! :slight_smile:
Y perdona por mi lamentable castellano!

1 Like

Ostras, lo de grid es error mío, porque he copiado y pegado de VSC y CodePen y se me ha avisado quitar el gris. Perdón
Y lo de VW seguro que es la solución! Muchas gracias. Lo probaré y te digo
Saludos

Vale, ahora hay otro problema, quiero colocar la barra en medio de la página. En el centro. Ocupa 50vw bien, pero para ponerla en el medio? Eso es lo que no me sale
Gracias

Pues… esso es dificil de explicar por que hay muchas fromas distintas de hacerlo.

si quieres hacerlo con css grid utiliza estes passos para poder entender lo que passa:

  1. en el css de nav pone background-color: grey , width: 100% y display: grid.
  2. en el css de .nav-bar-ul pone width: 50vw , justify-self: center;

Hay MUCHAS formas de conseguir esto y varias ventajes. yo prefiro utiliza css-grid porque es el mas potente pero cada uno tiene su preferencia.

Una ultimo comentario:
Al cambio de poner marin: 0; padding: 0; por todas partes, puedes defenirlo de una vez al inicio poniendo esto:

* {
  margin: 0;
  padding: 0;
}
1 Like

Oh, gracias. Parece que la 1a opción me ha funcionado. No habia pensado en hacer display: grid; para solucionarlo. Mucha gracias.
La 2a opción es lo que yo intentaba pero no se soluciona. No tengo ni idea de porque, pensé igual que tú. Bueno, muchas gracias!!!
@damianicely
Happy coding!