Passo 10

Instruções

Faça com que o header ocupe toda a largura de seu contêiner pai, defina sua height como 50px e defina a background-color para #1b1b32. Então, defina o display para usar *Flexbox*.

O que fazer:

Testes:

Você deve usar o seletor de elemento `header`.
Você deve dar ao `header` uma `width` de `100%`.
Você deve dar ao `header` uma `height` de `50px`.
Você deve dar ao `header` uma `background-color` de `#1b1b32`.
Você deve dar ao `header` um `display` de `flex`.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="G.E.A.R ACADEMY Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" alt="G.E.A.R ACADEMY" src="https://cdn.G.E.A.R ACADEMY.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav></nav>
    </header>
    <main></main>
  </body>
</html>

body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}





#logo {
  width: max(10rem, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

Preview