Technical Documentation Page - Build a Technical Documentation Page

I need help I’m stuck on

Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).

also the ask for help button to create a post does not work!

<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="styles.css">
        <title> Html/CSS Documentation</title>

      <main id="main-doc">
        <section class="main-section" id="Introduction_to_HTML"><header>Introduction to HTML</header></section> 
        <section class="main-section" id="HTML_Basics"> <header>HTML Basics</header>
        <p>HTML Is short for Hyper text markup language</p>
        <p> here are some Basic HTML tags you should know</p>
          <li> h1-h6 & p are to write the header or paragrafh</li>
          <li> DOCTYPE HTML tells the browser you are using html </li>
          <li> head element is where you put important emements </li>
          <li> body element is where you add all the context of the page </li>
          <li> link element is what you use to link you css stylesheet to your html page </li>
        <section class="main-section" id="How_to_link_CSS_style_sheet"><header>How to link CSS style sheet</header>
        <p>To link CSS style sheet you need to add an link element with a rel attribute that equals stylesheet and a href attribute that equals the name of the CSS file</p></section> 
        <section class="main-section" id="How_to_add_images"><header>How to add images</header>
         <p>To add an image to your html you need a img element with an src attribute with the file name or link to the image you want</p>
         <p> You can also make the image go to another link when clicked by adding an a element within the img tag then add an href attribute to the link you want</p></section>
        <section class="main-section" id="h1_and_p_elements"><header>h1 and p elements</header>
        <p> h1 elements are where you put the main text. they tell you what the page is going to be about there is also h1-6 h1 bing the main one</p></section> 
        <p> p elements are what you are going to use when you want to write an paragraph in you web page </p>
        <section class="main-section" id="Introduction_to_CSS"><header>Introduction to CSS</header> 
        <p> CSS is short for cascating style sheets css controles where the html elements will go and can add decoration to the website</p> </section> 
        <section class="main-section" id="leaning_the_sectors"><header>leaning the sectors</header>
        <p>The CSS sector is what you will use to apply rules to a psific element in your HTML DOCument</p>
        <p> you can also use more specific sectors like p.animal to target p elements with class of animal</p></section>
        <section class="main-section" id="How_to_position_contexts"><header>How to position contexts</header>
        <p>HTML has defalt positions if you want to change it you will need to use some CSS and exaple is i can cange the alignment of an text by setting text-align:center; this will center the text</p></section>  
        <section class="main-section" id="How_to_Master_floaters"><header>How to Master floaters</header>
        <p>To float an html element you need to set the css propertie to float: and which way you want with padding: xpx</p></section>
        <section class="main-section" id="learning_dry_coding_concepts"><header>learning dry coding concepts</header>
        <p> dry means Don't repeat yourself meaning try not to wright the same code twice</p></section> 
        <nav id="navbar"><header>Col Documentation</header>
        <a class="nav-link" href="#
        <a class="nav-link" href="#HTML_Basics">Basics</a>
        <a class="nav-link" href="#How_to_add_images">Images</a>
        <a class="nav-link" href="#How_to_link_CSS_style_sheet">Link style sheet</a>
        <a class="nav-link" href="#h1_and_p_elements"> H1/p element</a>
        <a class="nav-link" href="#Introduction_to_CSS">Introduction to CSS</a>
        <a class="nav-link" href="#leaning_the_sectors"> Sectors</a>
        <a class="nav-link" href="#How_to_position_contexts">positioning contexts</a>
        <a class="nav-link" href="#How_to_Master_floaters">Floaters</a>
        <a class="nav-link" href="#learning_dry_coding_concepts">Dry coding </a>



take each error message and check the corresponding code line by line to debug it.
For eg. The quoted line shows one of your .main-section elements.
It should match up with the .nav-link element’s href. If it is done correctly then the link should work as well (so you can try testing each link till you find the bad one).

The other error message is about the link -text-. In the case of the link text for eg that goes to the #Introduction_to_HTML, the text should match whatever you had in the header of your related section element. So it should say Introduction to HTML but in your case it seems to be:

So obviously Introduction doesn’t match.

Try to check each item carefully, one by one and see if that helps.