Hi, this code is passing all the tests except for " You should have at least five code
elements that are descendants of .main-section
elements". Any help would be greatly appreciated.
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="main-doc">
<section class="main-section" id="Ava">
<header class="section-header">
<h1>Ava</h1>
</header>
<div id="Ava_description">
<p>Ava is my oldest niece and lives about 2 hours away.</p>
<p>Here is a bit about her:</p>
<ul>
<li>She is a very outgoing girl</li>
<li>She loves princesses and anything girly</li>
</ul>
</div>
</section>
<section class="main-section" id="Joette">
<header class="section-header">
<h1>Joette</h1>
</header>
<div id="Joette_description">
<p>Joette lives in Atlanta and we visit eachother as often as we can.</p>
<p>Here is a bit about her:</p>
<ul>
<li>She is a very smart girl</li>
<li>She loves <a href="https://en.wikipedia.org/wiki/Unicorn">unicorns</a> and is very curious</li>
</ul>
</div>
</section>
<section class="main-section" id="Adiam">
<header class="section-header">
<h1>Adiam</h1>
</header>
<div id="Adiam_description">
<p>Adiam is Ava's sister and the middle child of my brother.</p>
<p>Here is a bit about her:</p>
<ul>
<li>She is a very independant girl</li>
<li>She is a mix of tough and <a href="https://en.wikipedia.org/wiki/Lionel_Messi">sensitive</a></li>
</ul>
</div>
</section>
<section class="main-section" id="Jacob">
<header class="section-header">
<h1>Jacob</h1>
</header>
<div id="Jacob_description">
<p>Jacob is my sister's second child and my only nephew.</p>
<p>Here is a bit about him:</p>
<ul>
<li>He loves to jump and is full of energy</li>
<li>He is not shy and is good with new people</li>
</ul>
<p>This is a picture of his trampoline.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Hometrampoline.jpg/330px-Hometrampoline.jpg">
</div>
</section>
<section class="main-section" id="Aleah">
<header class="section-header">
<h1>Aleah</h1>
</header>
<div id="Aleah_description">
<p>Aleah is the youngest of all my nieces and nephew.</p>
<p>Here is a bit about her:</p>
<ul>
<li>She is a very outgoing girl and always has a big smile</li>
<li>She is <a href="https://www.fcbarcelona.com/en/"fearless</a> and mature for her age</li>
</ul>
</div>
</section>
<nav id="navbar">
<header id="family">My nieces and nephew</header>
<ul>
<li><a href="#Ava" class="nav-link">Ava</a></li>
<li><a href="#Joette" class="nav-link">Joette</a> |
<li><a href="#Adiam" class="nav-link">Adiam</a>
|<li><a href="#Jacob" class="nav-link">Jacob</a>
<li><a href="#Aleah" class="nav-link">Aleah</a>
</ul>
</nav>
</main>
</body>
</html>
/* file: styles.css */
@media only screen(min-width:1025px) {
{ body
}
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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: