Responsive Web Design Projects - Build a Technical Documentation Page

H3LLO W0RLD,

I am trying to build the TECHNICAL DOCUMENTATION PAGE and would like to get a hint from someone on the following error message:


Your #navbar should have exactly one header element within it

  **Your code so far**
html
/* file: index.html */
<link rel="stylesheet" href="styles.css">
<main id="main-doc">
<section class="main-section" id="Introduction">
  <header>
    <nav id='navbar'>
      <header>
    <a class='nav-link' href="#Introduction">Introduction</a></header>
    </nav>
    </header>
  <code></code>

<p><i>CSS</i> stands for <strong>Casscading Style Sheet</strong> CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files. e.g.</p>
  <code></code>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </nav>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</section>
  **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: Responsive Web Design Projects - Build a Technical Documentation Page

Link to the challenge:

Hi, welcome to the forum!

Your code has some layout and syntax issues. I’ve added HTML comments to illustrate them. I’ve also neatened up the indentation, please try to keep your code neat it will be easier to proofread. More on indentation in this article.

Also is this your entire HTML document? I can’t see any <head> or <body> tags.


<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header><!—why is a header element wrapped around the navbar?—>
      <nav id='navbar'>
        <header>
           <a class='nav-link' href="#Introduction">Introduction</a>
        </header>
       </nav>
    </header>
    <code></code>

    <p><i>CSS</i> stands for <strong>Casscading Style Sheet</strong> CSS describes how   HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files. e.g.</p>
    <code></code>
    <li></li><!—why do these li elements have no ol or ul element before them?—>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </nav><!—what is this nav closing tag doing here? This is what is likely causing your error—>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </section>