Tell us what’s happening:
Describe your issue in detail here.
Hello, I am trying to understand why I am not passing the final few steps which are:
-The first child of each .main-section should be a header element.
-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.
-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).
I have been trying to figure these steps out for the past few days and cant figure it out. Any hints or help would be greatly appreciated!
**Your code so far**
/* file: index.html */
<DOCTYPE! html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
</head>
<main>
<title>Technical Documentation Page</title>
<main id="main-doc">
<section class="main-section" id="Technical_Drums"></section>
<header>
<h5>Technical Drums</h5>
</header>
<section class="main-section" id="Percussion_Types">
<header>
<h5>Percussion Types</h5>
</header>
<p></p>
<p></p>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</section>
<section class="main-section" id="Drum_Types">
<header>
<h5>Drum Types</h5>
</header>
<p></p>
<p></p>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</section>
<section class="main-section" id="Drum_Line">
<header>
<h5>Drum Line</h5>
</header>
<p></p>
<p></p>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</section>
<section class="main-section" id="Drum_Sticks">
<header>
<h5>Drum Sticks</h5>
</header>
<p></p>
<p></p>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</section>
<section class="main-section" id="Drum_Set<">
<header>
<h5>Drum Set</h5>
</header>
<p></p>
<p></p>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<code></code>
<code></code>
<code></code>
<code></code>
<code></code>
</section>
<nav id="navbar">
<br>
<header>Drum Documentation</header>
<a class="nav-link" href="Technical_Drums">Technical Drums</a>
<br>
<a class="nav-link" href="Percussion_Types">Percussion Types</a>
<a class="nav-link" href="Drum_Types">Drum Types</a>
<a class="nav-link" href="Drum_Line">Drum Line</a>
<a class="nav-link" href="Drum_Sticks">Drum Sticks</a>
<a class="nav-link" href="Drum_Set">Drum Set</a>
</nav>
</main>
/* file: styles.css */
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.70
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: