For some reason, my code isn’t passing the following two steps:
-
You should have at least five
section
elements with a class ofmain-section
. -
You should have at least five
.main-section
elements that are descendants of#main-doc
.
But the issue is that I already have five section elements with class =main-section, and each of those five section elements are also descendants of #main-doc. Is there any reason that the Project Console wouldn’t be recognizing those section elements? Thank you!
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css"
<main id="main-doc">
<nav id="navbar"><header>MainHeader</header>
<a class="nav-link" href="#header1">header1</a>
<a class="nav-link" href="#header2">header2</a>
<a class="nav-link" href="#header3">header3</a>
<a class="nav-link" href="#header4">header4</a>
<a class="nav-link" href="#header5">header5</a>
</nav>
<section class="main-section" id="header1">Section1
<header>header1</header>
<p></p>
<p></p>
<li></li>
<code></code>
</section>
<section class="main-section" id="header2">Section2
<header>header2</header>
<p></p>
<p></p>
<li></li>
<code></code>
</section>
<section class="main-section" id="header3">Section3
<header>header3</header>
<p></p>
<p></p>
<li></li>
<code></code>
</section>
<section class="main-section" id="header4">Section4
<header>header4</header>
<p></p>
<p></p>
<li></li>
<code></code>
</section>
<section class="main-section" id="header5">Section5
<header>header5</header>
<p></p>
<p></p>
<li></li>
<code></code>
</section>
</main>
/* file: styles.css */
@media (max-width: 768px)
{
a{
text-align:center;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: