Hello. Please help. I don´t know why my code doesn´t pass. The last item has one media query as asked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Documentation Page</title>
</head>
<style>
a {
display: block;
text-decoration: none;
color: black;
}
#navbar {
display: block;
width: 240px;
border: 1px solid black;
float: left;
}
#main-doc {
position: absolute;
margin-left: 250px;
margin-top: 0;
border: 1px solid black;
}
@media only screen and (max-width: 600px) {
#main-doc {
margin-left: 0px;
margin-top: 220px;
}
}
</style>
<body>
<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>
<a class="nav-link" href="#Variable_Scope">Variable Scope</a>
<a class="nav-link" href="#Global_Variables">Global Variables</a>
<a class="nav-link" href="#Constants">Constants</a>
<a class="nav-link" href="#Data_types">Data types</a>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>
<ul>
<li>Client-side</li>
<li>Server-side</li>
</ul>
</p>
</section>
<section class="main-section" id="What_you_should_already_know">
<header>What you should already know</header>
<p>
<ul>
<li>Understanding</li>
<li>Knowledge</li>
<li>Experience</li>
</ul>
</p>
</section>
<section class="main-section" id="Javascript_and_Java">
<header>Javascript and Java</header>
<p>JavaScript and Java are similar</p>
</section>
<section class="main-section" id="Hello_world">
<header>Hello world</header>
<p>to get started</p>
<code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code>
</section>
<section class="main-section" id="Variables">
<header>Variables</header>
<p>You use variables as symbolic names</p>
</section>
<section class="main-section" id="Declaring_Variables">
<header>Declaring Variables</header>
<p>You can declare a variable in three ways:</p>
<code>var x = 42</code>
<code>x = 42</code>
<code>let y = 13</code>
</section>
<section class="main-section" id="Variable_Scope">
<header>Variable Scope</header>
<p></p>
<code></code>
<code></code>
</section>
<section class="main-section" id="Global_Variables">
<header>Global Variables</header>
<p></p>
</section>
<section class="main-section" id="Constants">
<header>Constants</header>
<p></p>
<code></code>
<code></code>
<code></code>
</section>
<section class="main-section" id="Data_types">
<header>Data types</header>
<p></p>
</section>
</main>
</body>
</html>