为什么我的锚链接无法跳转到特定部分？

Question

I'm doing a Technical Documentation project for FCC and I should be able to click any of the links on the nav bar and jump to the corresponding section but for someone reason it isn't working. Below are snippets of the code.

To check on Codepen: https://codepen.io/andres146-the-selector/pen/abZKaXq

'''
         <nav id="navbar">
        <header id="nav-header"> JScript 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="#JAJ">Java and Javascript</a>
          <a class="nav-link" href="#HelloWorld">Hello World</a>
          <a class="nav-link" href="#Variables">Variables</a>
          <a class="nav-link" href="#DV">Declaring Variables</a>
          <a class="nav-link" href="#VS">Variable Scope</a>
          <a class="nav-link" href="#GV">Global Variables</a>
          <a class="nav-link" href="#Constants">Constants</a>
          <a class="nav-link" href="#DT">Data Types</a>
          <a class="nav-link" href="#IfElse">If...Else Statements</a>
          <a class="nav-link" href="#While">While</a>
          <a class="nav-link" href="#FS">Function Declarations</a>
          <a class="nav-link" href="#Reference">Reference</a>
          </nav>
         ,,,




     <section class="main-section" id="Introduction">
    <header> Introduction</header>
      <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.

JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
      <ul>
        <li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
        <li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
        </ul>
    
  </section>
    
    
    
    
  <section class="main-section" id="What_you_should_already_know">
    <header >What You Should Already Know</header>
        <p>This guide assumes you have the following basic background:</p>
          <ul>
        
            <li>A general understanding of the Internet and the World Wide Web (WWW).</li>
            <li>Good working knowledge of HyperText Markup Language (HTML).</li>
            <li>Some programming experience. If you are new to programming, try one of the 
                tutorials 
            linked on the main page about JavaScript.</li>
          </ul>

Answer 1

Something with that grid-template css property. Try using these changes with your css:

body{
  top:0px;
  display:grid;
/*   grid-template-areas: "nav main"; */          
/*   grid-template-columns:20vw 80vw; */
  margin:0;
 
  
}
#main-doc{
/*   added this */
  position:relative;
  left:20%;
  width:80%;
  
  grid-area:main;
  margin:0px;
  top:0px;
  padding-left:10px;
  
}

.main-section{
  padding:10px;
}

#navbar{
  grid-area:nav;
  position:fixed;
  border-right:solid;
  text-align:left;
  width:20%;
}
  .nav-link{
  display:block;
  border-top:solid;
  border-color:grey;
  color:#5F5C5B;
  padding:12px;
  text-decoration:none;
  z-index:100;

}
#nav-header{
  font-size:24px;
  font-weight:bold;
  height:50px;
  padding:5px;
  
}


header{
  font-size:24px;

  
}
.main-section{
  width:100;
}
code{
  display:block;
  background-color:#EAE5E3;
    padding:10px;
  max-width:100%;
 
}
p,li{
  padding:10px;
  
}

Answer 2

It's your hamburger menu (freecodecamp script) that is causing the inability for the links to be clickable. To test it out I adjusted your navbar CSS (margin-left: 300px;) and just by moving your navbar enough to the right away from your hamburger icon (when clicked) allowing enough space for the pop-out window the links then become clickable. What you'll need to do is change the location of the hamburger menu or navbar.

    #navbar{
  grid-area:nav;
  position: fixed;
  border-right:solid;
  text-align:left;
  margin-left: 300px; 
  width:20%;