Problems passing "Build a landing page" challenge


Ive one rule yet to pass, and i dont seem to understand whats the issue is, since it should work, the id nav bar is inside header

3. Within the <header> element I can see a <nav> element with corresponding id=“nav-bar”.’

#nav-bar is not a child of #header : expected 0 to equal 1
AssertionError: #nav-bar is not a child of #header : expected 0 to equal 1
at s.u (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:262:1134)
at s.e.(anonymous function) [as equal] (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:325:126)
at Function.n.strictEqual (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:224:568)
at r. (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:154:306444)
at c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31608)
at o.f.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31544)
at m.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37114)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37976
at s (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:36426)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:36495

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FCC- Product Landing Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
    <script src="main.js"></script>
</head>

<body>
    <header>
        <div id="header">
            <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png">
        </div>

        <nav id="nav-bar">
            <ul id="navigation-bar">
                <li><a class="nav-link" href="#features">Features</a></li>
                <li><a class="nav-link" href="#how-it-works">How it works</a></li>
                <li><a class="nav-link" href="#pricing">Pricing</a></li>
            </ul>
        </nav>
    </header>

    <section id="how-it-works">
        <form action="https://www.freecodecamp.org/email-submit" method="post" id="form">
            <h2>Handcrafted, home-made masterpieces</h2>
            <input name="email" id="email" type="email" placeholder="Enter your email address">
            <input type="submit" id="submit">GET STARTED</input>
        </form>
      
        <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>
    </section>
  
     <section id="features">

    </section>
    <section id="pricing">
        
    </section>
</body>

“AssertionError: #nav-bar is not a child of #header : expected 0 to equal 1”

So, in the html structure above you can see that <nav id="nav-bar"> its not a direct child of <div id="header">.

Just move the id="header" from div element to <header id="header"> and you will pass all tests.

Happy coding

1 Like

Thanks, I wonder how could i not see that :sweat: