I rewrote this question using a codepen to make things easier.
I'm trying to use flexbox global flexbox layout to do a top bar as in this codepen.
As you can see the top bar menu is skewed to the left. There are two separate things I want to know how to do.
1. How do I make the menu as fixed width and then center it horizontally.
2. How do I make the menu expand to the left and right edges like it does in the non flexbox layout.
I've tried every combination of specifying a width, text-align: center, and/or justify-content: center, but nothing seems to have any effect. Can anyone help get this codepen working or figure out what I'm doing wrong?