Kevin Powell - Community•2y ago

I am losing my mind on this nav problem

I have a simple navbar. It is not centering in the middle of the screen, no matter what I do. I cannot recreate the issue in codepen. I've stripped out all of my html and css besides my nav. Here is my html:

<body>
  <main>
      <header id="main">
        <nav>
          <ul>
            <li>
              <a href="#hero">Home</a>
            </li>
            <li>
              <a href="#hero">About</a>
            </li>
            <li>
              <a href="#hero">Services</a>
            </li>
            <li>
              <a href="#hero">Portfolio</a>
            </li>
          </ul>
        </nav>
      </header>
    </main>  
</body>

<body>
  <main>
      <header id="main">
        <nav>
          <ul>
            <li>
              <a href="#hero">Home</a>
            </li>
            <li>
              <a href="#hero">About</a>
            </li>
            <li>
              <a href="#hero">Services</a>
            </li>
            <li>
              <a href="#hero">Portfolio</a>
            </li>
          </ul>
        </nav>
      </header>
    </main>  
</body>

Here is my css:

header#main ul {
  display: flex;
  justify-content: center;
  gap: 5rem;
  list-style-type: none;
  padding: 0;
}

header#main ul {
  display: flex;
  justify-content: center;
  gap: 5rem;
  list-style-type: none;
  padding: 0;
}

That's it. If I remove padding: 0, it centers, but it should center even after removing the default ul padding since I have it inside a flex container. I've been trying to get this to work for several hours and I have legitimately no idea why it's behaving like this. Again, I tried it multiple times in a codepen and it works fine.

19 Replies

vinceOP•2y ago

So I just found out it's because of the differing lengths of the texts... is there a way I can make it centered without using some weird hack? I need a picture logo to be in the center of the screen and I can't currently achieve that if I have differing lengths of text

vinceOP•2y ago

vinceOP•2y ago

Ah ha! I used grid and it seems to work now 🙂 I always seem to solve my problems by typing it out after a few hours spent banging my head on a wall 😂

glutonium•2y ago

lul

Unknown User•2y ago

Message Not Public

vinceOP•2y ago

Then how do you recommend I go about it with flex? I need everything to be centered, and since flexbox allows child elements to mess with the layout, it means that if I have text that isn't the same length (eg Home vs About Us) then I can't get the third element to be in the dead center of the page. Comparatively, if I use grid, it tells the child elements where exactly to go and how to behave, meaning that the third element of my navbar will be dead center of the page (since I'm using fr). At least that's my understanding of it

Unknown User•2y ago

Message Not Public

glutonium•2y ago

grid for nav? meeeh I'd say flex

Jochem•2y ago

Why? If flex doesn't give you the layout you want and grid does?

glutonium•2y ago

i meaan.. I don't think grid is nescessary for nav i feel like flex is enough and flex gives better flexibility.. but it's just personal preference

Jochem•2y ago

I don't think you can achieve what vince wants to do with flex though?

glutonium•2y ago

I didn't quite get his question, but is the beginning he says, he can't centet the nav..based of that I thought, if that's the case flex should be enough xD

vinceOP•2y ago

Yea sorry, it was a little hard to explain 😂

Unknown User•2y ago

Message Not Public

glutonium•2y ago

naah naah..i never said don't use😂 u guys r getting me wrong i ment, i feel like flex is enough for nav.. I personally find that more useful.. i did add it's a personal preference xD

Unknown User•2y ago

Message Not Public

Jochem•2y ago

It also implies grid is harder or heavier than flex which isn't the case either. Use a hammer when you need a hammer, use a wrench when you need a wrench

Mannix•2y ago

why are you obsessed with having 3rd link in dead center especially with even number of links? You just want to give yourself a headache for no good reason 😛

vinceOP•2y ago

Client requirements 😂

Gaming

Programming

I am losing my mind on this nav problem