Navbar looks bad

1

there is some issue with my navbar. when i hover on it, it only changes part of the background.
this leads me to suspect that i made either the <ul> or the <header> too large, but i can’t figure out how to make them the same size as the list items.

additionally, any design advice will be appreciated

2

There’s a couple of changes you have to do for the navbar to look properly and have the links centered:

  1. ul { width: 100% }

  2. Get rid of

li {
  padding: 5%;
  margin-right: 20px;
}
  1. Set the padding you want on the <a> element instead

Hope it helps.

1 Like
3

I am also doing the product page. I was also having trouble with the nav items flowing of the page.

a width: 100%; solved the issue for me, but i tried with you but it does not seem to work