Foundation
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?
You can wrap the menu in a row and column to give is a max-width
In flexbox, the justify content attribute controls positioning:
This flexbox cheatsheet will help: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#right
Example http://codepen.io/rafibomb/pen/MyqpdG