justify-content: space-between failing to align elements as expected

The problem is a conflict with the Bootstrap stylesheet, which places pseudo-elements in your flex container. This causes space-between to calculate multiple flex items as opposed to just two.

Here’s your flex container:

The logo and nav menu are aligned with justify-content: space-between, but are not positioned at opposite edges. The alignment looks more like space-around.

---

Here’s Bootstrap’s ::before and ::after pseudo-elements (or pseudo-flex items):

As noted in Firefox documentation:

In-flow ::after and ::before pseudo-elements are flex items.

---

Let’s put some content in the pseudos:

Like shining a black light in a motel room, you see a lot of stuff you wish wasn’t there.

---

Remove (or override) the pseudo-elements and your problem is gone:

---

More details about flex containers and pseudo-elements:

• Pseudo elements breaking justify-content: space-between in flexbox layout
• Properly sizing and aligning the flex item(s) on the last row
• Methods for Aligning Flex Items along the Main Axis (see Box #81)