Tell us what’s happening:
Describe your issue in detail here.
Hello,
For hours now Ive tried to figure out where I’m going wrong at…
Any eyes other than mine are greatly appreciated.
Ive passed all the way to the very last item. The media query.
what am i missing?
thanks in advance
betty
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="title">JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<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>
</nav>
</nav>
</nav>
</nav>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="What_you_should_already_know">
<header>What you should already know</header>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="JavaScript_and_Java">
<header>JavaScript and Java</header>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="Hello_world">
<header>Hello world</header>
<p></p>
<p></p>
<code></code>
<code></code>
<code></code>
<code></code>
<code></code>
<li></li>
</section>
<section class="main-section" id="Variables">
<header>Variables</header>
<p></p>
<p></p>
<li></li>
</section>
</main>
</body>
</html>
/* file: styles.css */
body {
background-color: #f6f2f2;
color: black;
font-family: Verdana, Arial, sans-serif;
}
header {
font-size: 1.5em;
font-weight: bold;
}
#navbar {
position: fixed;
display: inline-block;
width: 300px;
height: 100%;
top: 0px;
left: 0px;
border-right: solid;
border-color: black;
background-color: #f3f2f2;
line-height: 2.5;
overflow: auto;
}
#main-doc {
position: absolute;
left: 300px;
padding: 25px;
top: 0px;
line-height: 1.8;
}
#navbar a {
display: block;
cursor: pointer;
text-decoration: none;
font-size: 1em;
color: black;
border-top: 1px solid;
border-width: 100%;
padding: 10px;
margin-left: auto;
#navbar header {
display: block;
margin-left: 15px;
margin-right: 15px;
}
@media (max-width: 992px) {
.nav {
float: left;
}
}
@media (max-width: 600px) {
#nav {
float: left;
}
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: