Build a Quiz Webpage - Step 10

HTML-CSS
1

Tell us what’s happening:

Greetings. I’m having difficulty with step #10 of Build a Quiz Webpage on the accesibility section of CSS. Its requesting this:
Step# 10
Make the header take up the full width of its parent container, set its height to 50px, and set the background-color to #1b1b32. Then, set the display to use Flexbox. I did all that. The error message says I need to use the header element as a selector in styles.css and I wrote it as .header but my code does not pass.

Your code so far

<!-- file: index.html -->
<!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="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
    <body>
      <header class="one">
      <img id="logo" alt="freeCodeCamp" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav></nav>
    </header>
    <main></main>
  </body>
</html>


/* file: styles.css */
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}


/* User Editable Region */

 .header { 
  height: 50px; 
  background-color: #1b1b32; 
  display: Flexbox; 
}

/* User Editable Region */


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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0

Challenge Information:

Build a Quiz Webpage - Step 10

2

Hi @lmancebo83

The console is giving you some information.

1. You should use the header element selector.
2. You should give the header a width of 100%.
3. You should give the header a height of 50px.
4. You should give the header a background-color of #1b1b32.
5. You should give the header a display of flex.

If you fix 1, you solved 3 and 4.

Happy coding

3

this is a class selector, is this what you are asked to use?

1 Like
4

yes :grinning_face: its asking me for that

5

Hi, thank you. I tried that out but nothing happens.

6

Please post your updated code.