Technical Documentation Page - Build a Technical Documentation Page

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:

are any of your styles working?
<link rel="stylesheet" href="style.css">

I think you should be linking to styles.css ?

now that you mention it I dont think so

omg thank you so much. Ive spent soooo much time on this…
Appearantly i messed up the css part. forgot the “s” on style.css
lol
on to the next!!!

1 Like