I really can't find out how to make my logo equaly centered with members item

[Porphyrogennitos]

CodePen.

[sitek94]

You could add:

.nav-item {
  flex: 1;
}

flex: 1 is short for flex-grow: 1

Here’s nice example of how this property works:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

[jsdisco]

Assuming that you still want the buttons left and right to have equal distance to the sides: Additionally to flex:1, you’ll have to set text-align individually for each .nav-item (the left-most is left, the right-most is right, and the middle one remains at center).

That will keep the middle button in the center, but now the other buttons have no space to the edges of the page. You can solve this in three ways:

• give the outer buttons an equal margin-left/margin-right (not optimal)
• change the padding of the #nav-bar to 1.5rem 5rem;
• reduce the width of the #nav-bar to (about) 85%.

[Porphyrogennitos]

Nice hack! Could you tell my why this works? I mean, without flex: 1 it was not working. What did the flex: 1 do that it fixed it?

[jsdisco]

Hey that’s not a hack!

See below, the |character is the border of each <li>, and the B is the buttons/links.

The situation with flex:1: Each <li> takes up exactly one third of the space, and the buttons are centered within.

| - - BBBB - - | - -  BB - -  | -  BBBBBB  - |

The situation without flex:1: Each <li> is only as big as the button/link within, and the rule that gets applied with justify-content: space-between or space-around is that the spaces between the flex elements are of equal size (that’s the - - - - - parts). As the rightmost button is bigger than the leftmost, it shifts the center button a bit to the left. You could also avoid that by giving all buttons the same width.

| BBBB | - - - - - | BB | - - - - - | BBBBBB |