Tell us what’s happening:
Describe your issue in detail here.
Why is this not working??
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title></title>
</head>
<body>
<nav id="navbar">
<header>Directory</header>
<p><a class="nav-link" href="#HTML_main_head">HTML_main_head</a></p>
<p><a class="nav-link" href="#CSS_main_head">CSS_main_head</a></p>
<p><a class="nav-link" href="#JavaScript_and_Java_head">JavaScript_and_Java_head</a></p>
<p><a class="nav-link" href="#CSS_ex1_head">CSS_ex1_head</a></p>
<p><a class="nav-link" href="#CSS_ex2_head">CSS_ex2_head</a></p>
<p><a class="nav-link" href="#CSS_ex3_head">CSS_ex3_head</a></p>
</nav>
<main id="main-doc">
<section class="main-section" id="HTML_main_head">
<header id="HTML_main_head">HTML_main_head</header>
<p>HTML_main_head</p>
<p>paragraph tags</p>
<p>paragraph tags</p>
<li>da</li>
<code>saf</code>
</section>
<section class="main-section" id="CSS_main-head">
<header id="CSS_main_head">CSS_main_head</header>
<p>CSS_main-head</p>
<p>paragraph tags</p>
<p>paragraph tags</p>
<li>da</li>
<code>saf</code>
</section>
<section class="main-section" id="JavaScript_and_Java_head">
<header id="JavaScript_and_Java_head">JavaScript_and_Java_head</header>
<p>JavaScript_and_Java_head</p>
<li>da</li>
<code>saf</code>
</section>
<section class="main-section" id="CSS_ex1_head">
<header id="CSS_ex1_head">CSS_ex1_head</header>
<p>CSS_ex1_head</p>
<li>da</li>
<code>saf</code>
</section>
<section class="main-section" id="CSS_ex2_head">
<header id="CSS_ex2_head">CSS_ex2_head</header>
<p>CSS_ex2_head</p>
<p>paragraph tags</p>
<li>da</li>
<code>saf</code>
</section>
<section class="main-section" id="CSS_ex3_head">
<header id="CSS_ex3_head">CSS_ex3_head</header>
<p>CSS_ex3_head</p>
<li>da</li>
<code>saf</code>
</section>
</main>
</body>
</html>
/* file: styles.css */
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: green;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: