Build a Flexbox header

Turn the project header into a flexible row:

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
}

.site-nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

Test the header with a long site name, several links, browser zoom at 200%, and a narrow viewport. Wrapping is better than clipping or making targets overlap.

Do not use order to create a visual sequence that differs from keyboard and reading order. Change the HTML if the logical order is wrong.

Quick check

Start quiz

Result

You got of right.

Try again