Hi guys... Failed:Your #navbar should have exactly one header element within it. What is wrong with my code?

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>JS Documentation Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <main id="main-doc">
    <section class="main-section" id="Introduction">
      <header>Introduction</header>
    </section>
    <section class="main-section" id="What_you_should_already_know">
      <header>What you should already know</header>
    </section>
    <section class="main-section" id="JavaScript_and_Java">
      <header>JavaScript and Java</header>
    </section>
    <section class="main-section" id="Hello_world">
      <header>Hello world</header>
    </section>
    <section class="main-section" id="Variables">
      <header>Variables</header>
    </section>
    <section class="main-section" id="Declaring_variables">
      <header>Declaring variables</header>
    </section>
    <section class="main-section" id="Variables_scope">
      <header>Variables scope</header>
    </section>
    <section class="main-section" id="Global_variables">
      <header>Global variables</header>
    </section>
    <section class="main-section" id="Constants">
      <header>Constants</header>
    </section>
    <section class="main-section" id="Data_types">
      <header>Data types</header>
    </section>
    <section class="main-section" id="if...else_statement">
      <header>if...else statement</header>
    </section>
    <section class="main-section" id="while_statement">
      <header>while statement</header>
    </section>
    <section class="main-section" id="Function_declarations">
      <header>Function declarations</header>
    </section>
    <section class="main-section" id="Reference">
      <header>Reference</header>
    </section>
  </main>
  <nav id="navbar">
      <header><a class="nav-link" href="#Introduction">Introduction</a></header>
      <header><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></header>
      <header><a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a></header>
      <header><a class="nav-link" href="#Hello_world">Hello world</a></header>
      <header><a class="nav-link" href="#Variables">Variables</a></header>
      <header><a class="nav-link" href="#Declaring_variables">Declaring variables</a></header>
      <header><a class="nav-link" href="#Variables_scope">Variables scope</a></header>
      <header><a class="nav-link" href="#Global_variables">Global variables</a></header>
      <header><a class="nav-link" href="#Constants">Constants</a></header>
      <header><a class="nav-link" href="#Data_types">Data types</a></header>
      <header><a class="nav-link" href="#if...else_statement">if...else statement</a></header>
      <header><a class="nav-link" href="#while_statement">while statement</a></header>
      <header><a class="nav-link" href="#Function_declarations">Function declarations</a></header>
      <header><a class="nav-link" href="#Reference">Reference</a></header>
  </nav>
</body>
</html>


/* file: styles.css */

Failed:Your #navbar should have exactly one header element within it.
Why am i getting this error?

  **Your browser information:**

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

Challenge: Build a Technical Documentation Page

Link to the challenge:

1 Like
2

Have you counted how many header elements you have in your #navbar? I’m going to go out on a limb and say it’s more than 1 :slight_smile:

3

No it’s not over… both main-section and nav-link have 14 elements each…

4

The test is telling you that you can only have one header element in the #navbar. You have many more than one. So the solution is to get rid of all of them except for one. The instructions spell this out:

“The navbar element should contain one header element which contains text that describes the topic of the technical documentation.”

The header shouldn’t go around your links in the navbar, it should be at the top above the links and the text in it should describe the topic of your technical document.

Let us know if you need further clarification.

5

The error is telling you that you should only have ONE header element inside the #n.av.b.a.r

I would start with that.

1 Like
6

looks like i get what you are trying to say… thanks…

7

Got it… Thanks… I missed the main header on the documentation page… Thanks a lot…

8

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