Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Describe your issue in detail here.
What does that mean?
" Your ‘#navbar’ should have exactly one ‘header’ element within it.

  **Your code so far**
/* file: index.html */
<html>
<link rel="stylesheet" href="styles.css">
<main id="main-doc">
  <section class="main-section" id="head1">
    <header id="head1">head1</header>
      <ol>
      <li>
        </ol>
    <p>p1</p>
    <p>p1</p>
    <code>
    </section>
    <nav id="navbar">
    <section class="main-section" id="head2">
      <header id="head2">head2</header>
      <a class="nav-link" href="head2">head2</a>
      <ol>
      <li>
        </ol>
      <p>p2</p>
      <p>p2</p>
      <code>      
    </section>
    <section class="main-section" id="head3">
      <header id="head3">head3</header>
      <a class="nav-link" href="head3">head3</a>
      <ol>
      <li>
        </ol>
      <p>p3</p>
      <p>p3</p>
      <code>      
    </section>
    <section class="main-section" id="head4">
      <header id="head4">head4</header>
      <a class="nav-link" href="head4">head5</a>
      <ol>
      <li>
        </ol>
      <p>p4</p>
      <p>p4</p>
      <code>     
    </section>
    <section class="main-section" id="head5">
      <header id="head5">head5</header>
      <a class="nav-link" href="head5">head5</a>
      <ol>
      <li>
        </ol>
      <p>p5</p>
      <p>p5</p>
      <code>
        </nav>     
    </section>
  </main>
</html>
/* file: styles.css */
@media(query){

}
  **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Hi! Welcome to the forum.

Your navbar should only contain your nav-links. It should not have the main website content wrapped inside it.

If you look at your code, your element with the id navbar has multiple header elements inside it. id head2 though to head5. That is what the error is referring to.

I still don’t understand how this work

This is your #navbar. I have marked with HTML comments where all the header elements are. There is more than one header in the #navbar.

The other headers should be inside the body, but not inside the #navbar.

<nav id="navbar">
    <section class="main-section" id="head2">
      <header id="head2">head2</header> <—!header—>
      <a class="nav-link" href="head2">head2</a>
      <ol>
      <li>
        </ol>
      <p>p2</p>
      <p>p2</p>
      <code>      
    </section>
    <section class="main-section" id="head3">
      <header id="head3">head3</header> <—!header—>
      <a class="nav-link" href="head3">head3</a>
      <ol>
      <li>
        </ol>
      <p>p3</p>
      <p>p3</p>
      <code>      
    </section>
    <section class="main-section" id="head4">
      <header id="head4">head4</header> <—!header—>
      <a class="nav-link" href="head4">head5</a>
      <ol>
      <li>
        </ol>
      <p>p4</p>
      <p>p4</p>
      <code>     
    </section>
    <section class="main-section" id="head5">
      <header id="head5">head5</header> <—!header—>
      <a class="nav-link" href="head5">head5</a>
      <ol>
      <li>
        </ol>
      <p>p5</p>
      <p>p5</p>
      <code>
        </nav>    

There are also a lot of HTML syntax mistakes, but lets start with the headers.


ok this is my new code