The Header with Flexbox

The header is next. It becomes a dark bar across the top of the page, with the logo at its left end and the navigation at its right end, both in the middle of its height. You made exactly this in the Flexbox lesson: the header becomes a flex container, its two children, the logo and nav, become its flex items, and justify-content: space-between pushes them to the two ends.

The color of the bar is #1e1b4b, a deep indigo like the night sky over the cinema (or a dark color of your own). The padding 16px 32px gives it 16 pixels at the top and bottom and 32 pixels on the left and right.

On a dark background, blue links are hard to read, so the links in the header will be white. And they won't be underlined: in a navigation, links are clear enough without it. The underline is set by the property text-decoration, and the value none removes it:

header a {
    color: white;
    text-decoration: none;
}

The rule for header a styles all the links in the header, the logo too. Then the logo gets its own size and weight in a rule for its class.

Finally, the two links of the navigation stand right next to each other. The nav becomes a flex container too, and gap puts space between them.