The first error says:
- Within the element I can see a 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
It is trying to point you to the problem.
When I look at your code, I see this:
<header>
<nav id="nav-bar" class="navbar">
<a class="nav-link" href="#why">Why is SenTea unique?</a>
<a class="nav-link" href="#flavors">Flavors</a>
<a class="nav-link" href="#contact">Contact</a>
</nav>
</header>
The test is correct: “#nav-bar is not a child of #header”. The element with the id of “nav-bar” is not a child of the element with the id “header”.
When I look more deeply in the code, I see that you do have something with that id:
<header id="header">
But you have another problem - you have a mismatch in your div
s - you have 6 <div
elements and only 5 </div>
elements.
I can temporarily test that theory by removing everything but that header, giving it the right id, and running the test:
<header id="header">
<nav id="nav-bar" class="navbar">
<a class="nav-link" href="#why">Why is SenTea unique?</a>
<a class="nav-link" href="#flavors">Flavors</a>
<a class="nav-link" href="#contact">Contact</a>
</nav>
</header>
With that, that test passes.
So, you need to fix that id problem and fix the structure of your page. In the HMTL page in CP, in the upper right corner of the pane, you and analyze your HTML and find errors. Even better is going to an HTML validator into a site like this, put in your code and see what it says. (You can ignore the first three warnings/errors because you are coming from CP.)
I assume that that will fix that failed test.
You need to do that kind of detective work on the remaining tests. A good dev is a good debugger. And a good debugger is a good detective.