Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

I am trying to finish this project but I keep getting the error regarding the href attributes in the nav-link elements. I have all my href attributes set to the corresponding section but the code till doesn’t run

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
 <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="Design_and_Structure:">
            <header>Design and Structure:</header>
            <p></p>
            <p></p>
            <code></code>
            <li></li>
        </section>
        <section class="main-section" id="Responsive_Design:">
            <header>Responsive Design:</header>
            <p></p>
            <p></p>
            <code></code>
            <li></li>
        </section>
        <section class="main-section" id="Accessibility:">
            <header>Accessibility:</header>
            <p></p>
            <p></p>
            <code></code>
            <li></li>
        </section>
        <section class="main-section" id="Interactivity_and_Functionality:">
            <header>Interactivity and Functionality:</header>
            <p></p>
            <p></p>
            <code></code>
            <li></li>
        </section>
        <section class="main-section" id="Conclusion:">
            <header>Conclusion:</header>
            <p></p>
            <p></p>
            <code></code>
            <li></li>
        </section>
        <nav id="navbar">
            <header>Coding a Navbar</header>
            <a class="nav-link" href="#Design_and_Structure:">Design and Structure:</a>
            <a class="nav-link" href="#Responsive_Design:">Responsive Design:</a>
            <a class="nav-link" href="#Accessibility:">Accessibility:</a>
            <a class="nav-link" href="#Interactivity_and_Functionality">Interactivity and Functionality:</a>
            <a class="nav-link" href="#Conclusion:">Conclusion:</a>
        </nav>
    </main>    
</body>
</html>
     
/* file: styles.css */
 header {
   font-size: 40px;
 }

  p {
    font-size: 20px;
  }

   code {
     
   }

    .navbar {
      display: flex;
      flex-direction: column;
      background-color: #D3D3D3;
      poaition: fixed;
      top: 0;
      left: 0;
    }

    .navbar a {
    color: #333; /* Text color */
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}


.navbar a:hover {
    background-color: #ddd;
    color: black;
}

.navbar a.active {
    background-color: #4CAF50;
    color: white;
}

 @media (max-width: 800px) {
   
 }

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

remove the dot and slash form that.

and here you missed the colon :. and remove the colon form all section id values.