Each .main-section should have an id that matches the text of its first child, having any spaces in the child's text replaced with underscores (_) for the id's

I’ve been struggling with passing the id’s test section for days and couldn’t understand where I went wrong.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <title>Web Development Documentation Page</title>
</head>
<body>
    <!--nav element-->
    <nav id="navbar">
        <header id="nav_header">Learn Web Development</header>
        <ul id="nav_ul">
            <li class="nav_li">
                <a href="#Where_To_Start" class="nav-link link_main">Where To Start</a>
            </li>
            <li class="nav_li">
                <a href="#Complete_Beginner" class="nav-link link_sub">Complete Beginner</a>
            </li>
            <li class="nav_li">
                <a href="#Beyond_the_Basics" class="nav-link link_sub">Beyond the Basics</a>
            </li>
            <li class="nav_li">
                <a href="#Moving_Onto_Scripting" class="nav-link link_sub">Moving Onto Scripting</a>
            </li>
            <li class="nav_li">
                <a href="#Frameworks_and_Tooling" class="nav-link link_sub">Frameworks and Tooling</a>
            </li>
            <li class="nav_li">
                <a href="#Topics_Covered" class="nav-link link_main">Topics Covered</a>
            </li>
            <li class="nav_li">
                <a href="#Getting_Started_with_the_web" class="nav-link link_sub">Getting Started with the web</a>
            </li>
            <li class="nav_li">
                <a href="#HTML_Structuring_the_web" class="nav-link link_sub">HTML - Structuring the web</a>
            </li>
            <li class="nav_li">
                <a href="#CSS_Styling_the_web" class="nav-link link_sub">CSS - Styling the web</a>
            </li>
            <li class="nav_li">
                <a href="#Getting_Our_Code_Example" class="nav-link link_main">Getting Our Code Example</a>
            </li>
            <li class="nav_li">
                <a href="#Contact_Us" class="nav-link link_main">Contact Us</a></li>
            <li class="nav_li">
                <a href="#See_Also" class="nav-link link_main">See Also</a>
            </li>
        </ul>
    </nav>
    <!--main element-->
    <main id="main-doc">
        <!--section elements-->
        <section id="Where_To_Start" class="main-section">
            <header class="main_header">Where To Start 
            </header>
        </section>
        <section id="Complete_Beginner" class="main-section">
            <header class="main_header">Complete Beginner</header>
            <p class="paragraphs">If you are a complete beginner to web development, we'd recommend that you start by working through our Getting started with the web module, which provides a practical introduction to web development.</p>
        </section>
        <section id="Beyond_the_Basics" class="main-section">
            <header class="main_header">Beyond the Basics</header>
            <p class="paragraphs">If you have a bit of knowledge already, the next step is to learn HTML and CSS in detail: start with our Introduction to HTML module and move on to our CSS first steps module.</p>
        </section>
        <section id="Moving_Onto_Scripting" class="main-section">
            <header class="main_header">Moving Onto Scripting</header>
            <p class="paragraphs">If you are comfortable with HTML and CSS already, or you are mainly interested in coding, you'll want to move on to JavaScript or server-side development. Begin with our JavaScript first steps and Server-side first steps modules.</p>
        </section>
        <section id="Frameworks_and_Tooling" class="main-section">
            <header class="main_header">Frameworks and Tooling</header>
            <p class="paragraphs">After mastering the essentials of vanilla HTML, CSS, and JavaScript, you should learn about client-side web development tools, and then consider digging into client-side JavaScript frameworks, and server-side website programming.</p>
        </section>
        <section id="Topics_Covered" 
            class="main-section">
            <header class="main_header">Topics Covered
            </header>
        </section>
        <section id="Getting_Started_with_the_web" class="main-section">
            <header class="main_header"><a href="" class="main_links">Getting Started with the web</a></header>
            <p class="paragraphs">Provides a practical introduction to web development for complete beginners.</p>
        </section>
        <section id="HTML_Structuring_the_web" class="main-section">
            <header class="main_header"><a href="" class="main_links">HTML - Structuring the web</a></header>
            <p class="paragraphs">HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is. This topic teaches HTML in detail.</p>
        </section>
        <section id="CSS_Styling_the_web" class="main-section">
            <header class="main_header"><a href="" class="main_links">CSS - Styling the web</a></header>
            <p class="paragraphs">CSS is the language that we can use to style and layout our web content, as well as adding behavior like animation. This topic provides comprehensive coverage of CSS.</p>
        </section>
        <section id="Getting_Our_Code_Example"  
            class="main-section">
            <header class="main_header">Getting Our Code Example</header>
            <p class="paragraphs">The code examples you'll encounter in the Learning Area are all available on GitHub. If you want to copy them all to your computer, the easiest way is to download a ZIP of the latest master code branch.</p>
            <p class="paragraphs">If you prefer to copy the repo in a more flexible way that allows for automatic updates, you can follow the more complex instructions:</p>
            <ol class="ol_list">
                <li class="ol_data">Install Git on your machine. This is the underlying version control system software that GitHub works on top of. 
                    Command to install git on Mac with homebrew: 
                    <code class="code"> $ brew install git</code>
                </li>
                <li class="ol_data">Open your computer's command prompt (Windows) or terminal (Linux, macOS).</li>
                <li class="ol_data">To copy the learning area repo to a folder called learning-area in the current location your command prompt/terminal is pointing to, use the following command: 
                    <code class="code">git clone https://github.com/mdn/learning-area</code>
                </li>
                <li class="ol_data">You can now enter the directory and find the files you are after (either using your Finder/File Explorer or the cd command).</li>
            </ol>
            <p class="paragraphs">You can update the learning-area repository with any changes made to the master version on GitHub with the following steps:</p>
            <ol class="ol_list">
                <li class="ol_data">In your command prompt/terminal, go inside the  
                    <code class="code">learning-area</code> directory using cd. For example, if you were in the parent directory: 
                    <code class="code">cd learning-area</code>
                </li>
                <li class="ol_data">Update the repository using the following command: 
                    <code class="code">git pull</code>
                </li>
            </ol>
        </section>
        <section id="Contact_Us"
            class="main-section">
            <header class="main_header">Contact Us</header>
            <p class="paragraphs">If you want to get in touch with us about anything, the best way is to drop us a message on our Discourse forum. We'd like to hear from you about anything you think is wrong or missing on the site, requests for new learning topics, requests for help with items you don't understand, or any other questions or concerns.</p>
            <p class="paragraphs">If you're interested in helping develop/improve the content, take a look at how you can help and get in touch! We are more than happy to talk to you, whether you are a learner, teacher, experienced web developer, or someone else interested in helping to improve the learning experience.</p>
        </section>
        <section id="See_Also" 
            class="main-section">
            <header class="main_header">See Also</header>
            <p class="paragraphs">All the information on this page is taken from <a href="https://developer.mozilla.org/en-US/docs/Learn" class="links">Learn Web Development</a></p>
        </section>
    </main>
</body>
</html>

if you can post a link to the exercise that would help someone to respond to your question.

I was able to pass the test by changing this section’s title and id

<section id="HTML:_Structuring_the_web" class="main-section">
            <header class="main_header"><a href="" class="main_links">HTML: Structuring the web</a></header>
1 Like


:partying_face::star_struck: I’m glad I asked for help, @hbar1st you saved me the hassle of another week of trail and error
Thank you

can i know ur code? i still failed using thisss

look at the solution above, that might be able to solve your problem