Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
In the technical documentation challenge, i cannot get a pass for the media query, even though i have added one.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="styles.css">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<main id="main-doc">
  <nav id="navbar">
    <header>js documentation</header>
    <a class="nav-link" href="#introduction">introduction</a>
    <a class="nav-link" href="#variables">variables</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="#constants">constants</a>
    </nav>
  <section class="main-section" id="introduction">
    <header>introduction</header>
    <p>bla dpkskmd
      dlkfjfkldfklfn
      sdfsfd
    </p>
    <p>dfgdfgfdg</p>
    <p>dfgdfgfdg</p>
    <p>dfgdfgfdg</p>
    <code></code>
    <li></li>
    </section>
  <section class="main-section" id="variables">
    <header>variables</header>
    <p></p>
    <p></p>
    <p>dfgdfgfdg</p>
    <p>dfgdfgfdg</p>
    <p>dfgdfgfdg</p>
     <code></code>
     <li></li>
    </section>
  <section class="main-section" id="javascript_and_java">
    <header>javascript and java</header>
    <p></p>
    <p></p>
    <p>bla dpkskmd
      dlkfjfkldfklfn
      sdfsfd
    </p>
    <p>dfgdfgfdg</p>
    <p>dfgdfgfdg</p>
    <p>dfgdfgfdg</p>
     <code></code>
     <li></li>
    </section>
  <section class="main-section" id="hello_world">
    <header>hello world</header>
    <p></p>
    <p></p>
    <p>bla dpkskmd
      dlkfjfkldfklfn
      sdfsfd
    </p>
    <p>dfgdfgfdg</p>
    <p>dfgdfgfdg</p>
    <p>dfgdfgfdg</p>
<code></code>
<li></li>
    </section>
  <section class="main-section" id="constants">
    <header>constants</header>
    <p></p>
    <p></p>
    <p>bla dpkskmd
      dlkfjfkldfklfn
      sdfsfd
    </p>
    <p>dfgdfgfdg</p>
    <p>dfgdfgfdg</p>
    <p>dfgdfgfdg</p>
    <code></code>
    <li></li>
    </section>
</main>

<body>
  </body>
<html>

/* file: styles.css */

#navbar{
position: absolute;
left: 0;
z-index: 1;
 width: 300px;

 
@media (max-width: 800px){
#main-doc{
  background: lightblue;
}
}

  **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:

2

remember to close your #navbar selector

3

also once you’ve done what ilenia has said and correct that in your css file, you’ll see there are other errors as well, just a heads up, happy learning :slight_smile: