display: flex Method

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!

This is a really simple flex menu. The width of the "buttons" is just the width of the contents (text) plus padding on the anchor tag, which has been styled to generate a block display box.