Flexbox Nav Bar Question

Hi
So I’m trying to make a top nav bar using Flexbox. This is what I have so far:

I’m trying to make the 3 middle buttons (Design, About, How-To) exactly in the middle. And the Logo and Donate button on the edges. So basically perfectly center the 3 anchor elements.

Here is my CSS:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background-color: white;
}

.logo {
  color: hsl(230, 95%, 60%);
  font-family: DinBold;
  text-decoration: none;
}

.nav-links a {
  font-weight: 500;
  color: rgb(20, 20, 30);
  text-decoration: none;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  padding: 0px 20px;
}

Any tips would be great, thanks :slight_smile:

Hmmm. Try setting the header width to 100%. I have a feeling it may not be taking up the full width of the page.