You should have the same number of .nav-link and .main-section elements.
there are 6 nav-link and main-section elements on the page and it won’t give me to proceed as correct
Your code so far
<!-- file: index.html -->
<!DOCTYPE html >
<html>
<link rel="stylesheet" href="styles.css">
<main id="main-doc">
<nav id="navbar" href="main-section">
<header>LaLiga Teams</header>
<a class="nav-link" href="Read_Madrid">Real Madrid</a>
<a class="nav-link" href="Barcelona">Barcelona</a>
<a class="nav-link" href="Valencia">Valencia</a>
<a class="nav-link" href="Atletico_Madrid">Atletico Madrid</a>
<a class="nav-link" href="Sevilla">Sevilla</a>
<a class="nav-link" href="Villareal">Villareal</a>
</nav>
<section class="main-section" id="Real_Madrid">
<header>Real Madrid</header>
<p></p>
<p></p>
<code></code>
<ul>
<li></li>
</ul>
</section>
<section class=".main-section" id="Barcelona">
<header id="Barcelona">Barcelona</header>
<p></p>
<p></p>
<code></code>
<ul>
<li></li>
</ul>
</section>
<section class="main-section" id="Valencia">
<header>Valencia</header>
<p></p>
<p></p>
<code></code>
<ul>
<li></li>
</ul>
</section>
<section class="main-section" id="Atletico_Madrid">
<header>Atletico Madrid</header>
<p></p>
<p></p>
<code></code>
<ul>
<li></li>
</ul>
</section>
<section class="main-section" id="Sevilla">
<header>Sevilla</header>
<p></p>
<p></p>
<code></code>
<ul>
<li></li>
</ul>
</section>
<section class="main-section" id="Villareal">
<header>Villareal</header>
<p></p>
<p></p>
<code></code>
<ul>
<li></li>
</ul>
</section>
</main>
</html>
/* file: styles.css */
#Barcelona {
background-color: #0477ae;
border: 0 0 1px 1px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: