How to center a element in a flex with space-between where left element has different size

Question

I have a navbar with 3 items spaced with space-between, the one on the left is longer in width than the one on the left, this results in the item in the center being shifted to the right, how can i solve this?

Answer 1

To center the navbar instead of using space-between do this in your css file:

div#nav{
  text-align: center;
}
div#nav ul{
  display: inline-block;
}

Answer 2

To center the links, with space-between and flex you can use justify-content-center and also use margin: auto;