Tell us what’s happening:
Describe your issue in detail here.
Your code so far
It’s not accepting my header in within the .main-section element. The code looks correct . I put it below. Let me know if you see a problem.
<section class="main-section" id="first_class">
<header>First Class</header>
<p></p><p></p><code></code><li></li><nav id="navbar"><header>First Documentation</header><a class="nav-link" name="first_class" href="#first_class">First Class</a></nav></section>
<section class="main-section" id="second_class">
<header>Second Class</header>
<p></p><p></p><code></code><li></li><nav id="navbar"><a class="nav-link" name="second_class" href="#second_class">Second Class<a/></nav></section>
<section class="main-section" id="third_class">
<header>Third Class</header>
<p></p><p></p><code></code><li></li><nav id="navbar"><a class="nav-link" name="third_class" href="#third_class">Third Class</a></nav></section>
<section class="main-section" id="fourth_class">
<header>Fourth Class</header>
<p></p><p></p><code></code><li></li><nav id="navbar"><a class="nav-link" name="fourth_class" href="#fourth_class">Fourth Class</a></nav></section>
<section class="main-section" id="fifth_class">
<header>Fifth Class</header>
<p></p><p></p><code></code><li></li><nav id="navbar"><a class="nav-link" name="fifth_class" href="#fifth_class">Fifth Class</a></nav></section>
</main>
</body>
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main-doc" name="technical-documentation">
<section class="main-section" id="first_class">
<header>First Class</header>
<p></p><p></p><code></code><li></li><nav id="navbar"><header>First Documentation</header><a class="nav-link" name="first_class" href="#first_class">First Class</a></nav></section>
<section class="main-section" id="second_class">
<header>Second Class</header>
<p></p><p></p><code></code><li></li><nav id="navbar"><a class="nav-link" name="second_class" href="#second_class">Second Class<a/></nav></section>
<section class="main-section" id="third_class">
<header>Third Class</header>
<p></p><p></p><code></code><li></li><nav id="navbar"><a class="nav-link" name="third_class" href="#third_class">Third Class</a></nav></section>
<section class="main-section" id="fourth_class">
<header>Fourth Class</header>
<p></p><p></p><code></code><li></li><nav id="navbar"><a class="nav-link" name="fourth_class" href="#fourth_class">Fourth Class</a></nav></section>
<section class="main-section" id="fifth_class">
<header>Fifth Class</header>
<p></p><p></p><code></code><li></li><nav id="navbar"><a class="nav-link" name="fifth_class" href="#fifth_class">Fifth Class</a></nav></section>
</main>
</body>
</html>
/* file: styles.css */
#navbar {
position: absolute;
left: auto
}
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: