Technical documentation page help NEEDED- #12

I can’t seem to pass #12 on the Technical Documentation Project. Everything looks correct and I’ve tried numerous times to figure out what I’m doing wrong here with no luck. Hoping to get some extra eyes to help. been at this two hours on this last part

super appreciate you guys helping right now did not expect this fast, if you have time would also like to inquire on what exactly “User Story #14: On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left side of the screen and should always be visible to the user.” is looking for and how the thought process should be when trying to add css to solve it

The failing test says:

Each element with the class of “nav-link” should contain text that corresponds to the text within each (e.g. if you have a “Hello world” section/header, your navbar should have an element which contains the text “Hello world”).

Check that these headers have corresponding .nav-link elements and be mindful of case! : SECTION ONE,SECTION_TWO,SECTION_THREE,SECTION_FOUR,SECTION_FIVE : expected 5 to equal 0

AssertionError: Check that these headers have corresponding .nav-link elements and be mindful of case! : SECTION ONE,SECTION_TWO,SECTION_THREE,SECTION_FOUR,SECTION_FIVE : expected 5 to equal 0

It is saying that the link and the header should match.

The text here:

<a class="nav-link" href="#section_one">sectionone</a>

should match this:

<header>section one</header>

One has a space, the other doesn’t.

When I fix that for the five links, that test passes.

Hi @scamguest,

When you run the test, if you click on the red bouton, you can see the details of the errors. For the 12th user story, it says:

Each element with the class of “nav-link” should contain text that corresponds to the text within each (e.g. if you have a “Hello world” section/header, your navbar should have an element which contains the text “Hello world”).

Look at your navbar code:

<nav id="navbar">
  <header class="nav-header">navigation menu</header>
  <a class="nav-link" href="#section_one">sectionone</a>
  <a class="nav-link" href="#section_two">sectiontwo</a>
  <a class="nav-link" href="#section_three">sectionthree</a>
  <a class="nav-link" href="#section_four">sectionfour</a>
  <a class="nav-link" href="#section_five">sectionfive</a>
</nav>

Compare the text you put in your links and the one of your headers. For the first one:
Link: sectionone
Header: section one

when i fixed #12 with the suggestions above by replacing the header to match my class header with no spaces(if thats what you call it), but now #4 doesn’t work.

The link you shared is still with the content you shared at start of the topic. Can you provide another link?

here is the updated one:

You don’t need a link. If you update the pen, all the links to that pen will show the changed code, not the old code.

The error says:

Each element with the class of “main-section” should also have an id comprised of the innerText contained within it, with underscores in place of spaces. The id may include special characters if there are special characters in the respective innerText. (e.g. The that contains the header, “JavaScript & Java”, should have a corresponding id=“JavaScript_&_Java”).

Example in your code:

<section class="main-section" id="section_one">
  <header>sectionone</header>
</section>

The value of your ID and the text of your header are not matching. The _ is to replace the space you could meet in writing the text into your header.