The Navigation Bar

Time for the last small project! This time, you'll lay out a page with what you've learned in the lessons Display and Position and Flexbox. As before, the instructions say what the page should look like, and how you get there is up to you.

The project. Happy Paws looks after cats in their own homes while their owners are away, and it needs a page with its prices. The HTML and the look of the parts of the page (the colors, the font, the cards and the buttons) are ready in style.css, but everything is one below the other. Over three exercises, you'll lay out the navigation bar, put the price cards side by side and make the most popular plan stand out. Each exercise continues where the previous one ended.

At the end, the page will look like this (smaller):

The task. The navigation bar at the top has the logo at its left end and the links at its right end, all of them in the middle of the bar's height. There are 24px between the links.

A tip: the links are in a div of their own, with the class links. An element can be a flex item and a flex container at the same time.