Responsive Web Design Projects - Build a Technical Documentation Page

Tell us what’s happening:
Describe your issue in detail here.
Hi , i am stuck on #15 your page must have one media query . i try in codepen its working but when i paste in free code camp , it showing error. i am so tired to find this. if any one know this help me .

  **Your code so far**
/* file: index.html */
<html>

<head>
<title>technical page</title>
<link rel="stylesheet" href="tech.css">
</head>

<body>
<nav id="navbar">
<header>Clash_of_clan</header>
<ul>
<li><a class="nav-link" href="#Hero_in_coc">Hero in coc</a></li>
<li><a class="nav-link" href="#King">King</a></li>
<li><a class="nav-link" href="#Queen">Queen</a></li>
<li><a class="nav-link" href="#Wardern">Wardern</a></li>
<li><a class="nav-link" href="#Royal_champion">Royal champion</a></li>
</ul>


</nav>



<main id="main-doc">
  <section id="Hero_in_coc" class="main-section">
    <header>Hero in coc</header>
    <p>
      <code></code>
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
      a type specimen book.

    <h4>Heros in coc:</h4>
    <ul>
      <li>king</li>
      <li>Queen</li>
      <li>Wardern</li>
      <li>Royal champion</li>
      <li>Heros pets</li>
    </ul>
    </p>

  </section>
  <section id="King" class="main-section">
    <header>King</header>
    <p>
      <code></code>
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
      a type specimen book.</p>
  </section>

  <section id="Queen" class="main-section">
    <header>Queen</header><p>
      <code></code>
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
      a type specimen book.</p>
  </section>

  <section id="Wardern" class="main-section">
    <header>Wardern</header><p>
      <code></code>
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
      a type specimen book.</p>
  </section>

  <section id="Royal_champion" class="main-section">
    <header>Royal champion</header><p>
      <code></code>
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
      a type specimen book.</p>
  </section>

</main>
</body>

</html>

/* file: styles.css */






#navbar{
position:fixed;
height: 100%;
min-width: 300px;
width: 300px;

top: 0px;
left: 0px;
color: black;
background-color: rgba(241, 235, 227, 0.644);
padding: 75px 0px;}



@media (max-width:720px){
  p {
    display: none;
  }
  
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Responsive Web Design Projects - Build a Technical Documentation Page

Link to the challenge:

The name of the stylesheet to use in the FCC editor is “styles.css”.

thank you brother. i have finishes my project with your help. thank u so much .