Tell us what’s happening:
The only test I’m not passing is: You should have the same number of .nav-link and .main-section elements.
? : / ?
I have exactly 6 main-section and 6 nav-link elements in class I don’t understand what wrong.
Your code so far
<!-- file: index.html -->
<!DOCTYPe html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<main id="main-doc">
<section class="main-section" id="Introduction"><header>Introduction</header>
<p></p><p></p><code></code><ul><li></li><li></li></ul></section>
<section class="main-section" id="What_you_should_already_know">
<header>What you should already know</header>
<p></p><p></p><code></code><ul><li></li></ul></section>
<section class="main_section" id="JavaScript_and_Java"><header>JavaScript and Java</header>
<p></p><p></p><code></code><ul><li></li></ul></section>
<section class="main-section" id="Hello_world"><header>Hello world</header>
<p></p><p></p><code></code><ul><li></li></ul></section>
<section class="main-section" id="Variables"><header>Variables</header>
<p></p><p></p><code></code><ul><li></li></ul></section>
<section class="main-section" id="Declaring_variables"><header>Declaring variables</header>
<p></p><p></p><code></code><ul><li></li></ul></section>
</main>
<nav id="navbar">
<header>JS Documentation</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
<a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
<a class="nav-link" href="#Hello_world">Hello world</a>
<a class="nav-link" href="#Variables">Variables</a>
<a class="nav-link" href="#Declaring_variables">Declaring variables</a>
</nav>
</body>
</html>
/* file: styles.css */
.info {text-align: center; border: 3px solid grey;width: 1000px}
#navbar {position: sticky; bottom: 400px; border: 3px solid grey; width: 200px; content: block; }
.nav-link {color: black; text-decoration: none; border: 1px solid black; }
.head {border: 1px solid black; margin: 2px 2px 2px 2px;}
@media (max-width: 500px) {.info { max-width: 1100px;}
}
main {display:flex;}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page