Unable to correct error on Technical Documentation Page

HTML-CSS
1

Hi, I’m working on the Technical Documentation Page on the Responsive Web Design Projects. I keep getting this error when I run the tests. I can’t figure out why. Any ideas?

## 10. Additionally, the navbar should contain link (<a>) elements with the class of "nav-link". There should be one for every element with the class "main-section".

There should be one .nav-link for every element with the class of "main-section", and every .nav-link should be within #navbar : expected 9 to equal 7

<!-- Technical documentation
-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<link rel="stylesheet" href="landing-page.css">
  
  <nav id="navbar">
    <header>Cage Considerations</header>
  <ul>
    <li><a class="nav-link" href="#Introduction">Introduction</a></li>
    <li><a class="nav-link" href="#The_Basics">The Basics</a></li>
    <li><a class="nav-link" href= "#Cage_Size">Cage Size</a></li>
      <li><a class="nav-link" href="#Furnishings">Furnishings</li>
      <li><a class="nav-link" href="#Substrate">Substrate</a></li>
      <li><a class="nav-link" href="#Cage_Bar_Width">Cage Bar Width</a></li>
      <li><a class="nav-link" href="#Middle_Sections">Middle Sections</a></li>
   
    </ul>
    </nav>
 <main id="main-doc"> 
   
   <section class="main-section" id="Introduction">
     <header>Introduction</header>
     <p></p>
     <code></code>
    </section>
    
 <section class="main-section" id="The_Basics">
    <header>The Basics</header>
   <code></code>
      <ul>
      <li>Style of Cage</li>
       <p></p>
       <li>Construction of Cage</li>
      <p></p>
     <li>Positioning of Cage</li>
    </ul>
    <code></code>
    </section>
     
    <section class="main-section" id="Cage_Size">
    <header>Cage Size</header>
      <ul>
      <li>Number of Rats</li>
       <p></p>
      <li>Height</li>
      <p></p>
       <li>Width</li>
        </ul>
      <p></p>
     <p></p>
       <code></code>
    </section>
      
    <section class="main-section" id="Furnishings">
      <header>Furnishings</header>
     <p></p>
     <p></p>
      <code></code>
    </section>
  
    
   <section class="main-section" id="Substrate">
     <header>Substrate</header>
      <p></p>
     <p></p>
     <code></code>
      </section> 
     
    <section class="main-section" id="Cage_Bar_Width">
   <header>Cage Bar Width</header>
      <p></p>
      <code></code>
      </section>
  
      <section class="main-section" id="Middle_Sections">
   <header>Middle Sections</header>
        </section>
 
   </main>
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

you have syntax errors, I suggest you pass your code with an html validator like this: https://validator.w3.org/ and work at fixing all the errors

4

Hello,
You didn’t close the a tag here:

      <li><a class="nav-link" href="#Furnishings">Furnishings</li>
5

Najme, THANK YOU! That was it!

And thank you to everyone who helped me. :slight_smile:

6

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