Learn Accessibility by Building a Quiz - Step 10

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I have been tryig o pass but im gettung a error telling me to use the header element selector
Your code so far
.header {
width:100%;
height:50px;
background-color:#1b1b32;
display:flex;
}

<!-- 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>
      <img id="logo" 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;
}

.header {
  width:100%;
	height:50px;
	background-color:#1b1b32;
	display:flex;
 }

#logo {
  width: max(100px, 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/106.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 10

Link to the challenge:

2

Hi!

header itself is a syntax in html and css. So when you type .header, you are not selecting the header syntax, instead you are selecting header class which hasn’t been defined in the html.

If you want to select the header syntax, just type header without a dot in the css followed by the desired code.

Hope this helps.

1 Like
3

thank you so much to think a dot messed up everything.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.