display: flex method to create equal width buttons and tabs just for fun.
This menu is using display: flex to create horizontal display
With flexbox, you need a "flex container" to lay out the children. In this case, the flex container is the unordered list, and the children are the list items, so the semantic structure of your menu is ready for flexbox without anything else needed in the markup!
In this design, styling the list item to have a flex of 1 makes all the list items the same width. The text is centered, and padding on top/bottom of the anchor tag makes the height. Of course, the anchor tag is styled to generate a block display box. The gap between the list items is styled in the list.
By making the current page background color of the anchor tag the same color as the page, it creates the "tab."