Each .nav-link should have an href attribute that links to its corresponding .main-section

Tell us what’s happening:
Describe your issue in detail here.
Each .nav-link should have an href attribute that links to its corresponding .main-section

I copied and paste the text from the id to the href so I don’t think it’s a typo. Can anybody tell me what I’m missing?

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <p></p>
    <p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
    <code></code>
     <li></li>
 </section>
  <section class="main-section" id="Javascript_and_Java">
    <header>Javascript and Java</header>
    <p></p>
    <p>JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.</p>
    <code></code>
     <li></li>
 </section>
  <section class="main-section" id="Hello_World">
    <header>Hello World</header>
    <p></p>
    <p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code</p>
    <code></code>
     <li></li>
</section>
  <section class="main-section" id="Variables">
    <header>Variables</header>
    <p></p>
    <p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
    <code></code>
     <li></li>
  </section>
  <section class="main-section" id="Declaring_Variables">
    <header>Declaring Variables</header>
    <p></p>
    <p>You can declare a variable in three ways:
With the keyword var.
By simply assigning it a value. 
With the keyword let.</p>
   <code></code>
   <li></li>
  </section>
</main>
<nav id="navbar">
  <header>JS Documentation</header>
 <a class="nav-link" href="Introduction">Introduction</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>
  <a class="nav-link" href="Declaring_Variables">Declaring Variables</a>
</navbar>
</html>
/* file: styles.css */
header{font-weight:bold}
@media(max-width:10000px){}
.nav-link{href:mainsection}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Challenge: Build a Technical Documentation Page

Link to the challenge:

It has to link to the corresponding .main-section via id of the section.
Put # in front of the name; tells the computer to look for id

 <a class="nav-link" href="#Variables">Variables</a>

It worked! Thank you!