Responsive Web Design Projects - Build a Technical Documentation Page

Tell us what’s happening:
Describe your issue in detail here. please i need someone to help me,my code keeps tell me this" Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id)." and this “Failed:Your Technical Documentation project should use at least one media query”. please i have been stuck here for days

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport", content="width=device-width, intial-scale=1.0">
    <title>Technical Documentation</title>
    <link href="styles.css" rel="stylesheet"></link>
    </head>
  <html>
    <body>
      <main id="main-doc">
        <section class="main-section" id="PENIELFARM"><header>PENIELFARM</header></section>
       <section class="main-section" id="PENIELFARM"><header>PENIELFARM</header></section>
        <section class="main-section" id="Farming"><header>Farming</header></section>
          <section class="main-section" id="Farming_and_Housing"><header>Farming and Housing</header></section>
          <section class="main-section" id="Fishery"><header>Fishery</header></section>
          <section class="main-section" id="Fishery_and_Poultry"><header>Fishery and Poultry</header></section>
          <section class="main-section" id="Piggery"><header>Piggery</header>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <code></code>
          <code></code>
          <code></code>
          <code></code>
          <code></code>
          <nav id="navbar">
            <header>PENIELFARM</header>
            <li><a class="nav-link" href="PENIELFARM">PENIELFARM</a></li>
            <li><a class="nav-link" href="PENIELFARM">PENIELFARM</a></li>
             <li><a class="nav-link" href="Farming">Farming</a></li>        
 <li><a class="nav-link" href="Farming_and_Housing">Farming and Housing</a></li>
 <li><a class="nav-link" href="Fishery">Fishery</a></li>
 <li><a class="nav-link" href="Fishery_and_Poultry">Fishery and Poultry</a></li>
 <li><a class="nav-link" href="Piggery">Piggery</a></li>
 </section>
 </nav>
        </main>
      </body>
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

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

Link to the challenge:

You should be using # before id