Flexbox: A Row

Normally the boxes of a page stack: in the shop's header, the heading comes first and the nav sits below it. display: flex on an element makes it a flex container, and its direct children become flex items that stand side by side in a row. Only children count, not grandchildren: the links inside the nav are not items of the header.

Three more properties arrange a row. justify-content places the items along the row: space-between puts all the free space between them, so the first item sits at the start and the last at the end. align-items lines them up across the row: center puts each one on the middle. gap puts space between the items, never before the first or after the last. For example, on another element:

footer {
  display: flex;
  justify-content: center;
  gap: 8px;
}

The grader's browser draws nothing, so the check can't tell you that the heading and the nav really stand in a row: whether things line up and fit is for your eyes, in the Your page picture. It prints the declarations that win on the header and on the nav, and the header's two children, its flex items. Your stylesheet must make it print:

> the style of header (1 element, window 1024 px wide)
  header "Corner Shop Home Cart"
    display: flex   <- header
    justify-content: space-between   <- header
    align-items: center   <- header
> the style of header > * (2 elements, window 1024 px wide)
  h1 "Corner Shop"
  nav "Home Cart"
> the style of nav (1 element, window 1024 px wide)
  nav "Home Cart"
    display: flex   <- nav
    gap: 16px   <- nav

Your task: at the end of styles.css, write a header rule with display: flex, justify-content: space-between and align-items: center. Then write a nav rule with display: flex and gap: var(--gap).

Assignment
Follow the Coding Tutorial to put the shop's heading and nav in one row, spread apart and lined up on the middle, and to make the nav's two links a row with a gap.

Hint
Flex rules go on the parent: the header for the heading and the nav, the nav for its links. gap: var(--gap) uses the variable from :root, so the check prints its value, 16px.