Anchor element not clickable in Nav

Tell us what’s happening:

So I’ve finished the project but it bothers me that the .nav-link elements aren’t clickable for some reason, I’ve check both the CSS and HTML to make sure that there isn’t any open selector or tag, I’m not sure whether I’ve misplaced an attribute somewhere or is it just written wrongly, but the project check passed so I’m stumped.

Your code so far

<!DOCTYPE html>
<html lang="en">

    <title>Techinical Documentation Page</title>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <nav id="navbar">
        <header>Basic Python Programming</header>
          <li><a class="nav-link" href="#Installation">Installation</a></li>
          <li><a class="nav-link" href="#Variables">Variables</a></li>
          <li><a class="nav-link" href="#Math_Function">Math Function</a></li>
          <li><a class="nav-link" href="#Print">Print</a></li>
          <li><a class="nav-link" href="#Loop">Loop</a></li>
    <main id="main-doc">

      <section id="Installation" class="main-section">
        <header class="section-header">Installation</header>
        <p class="section-information">Follow the installation instructions on the official Python Website <a href="" target="_blank">here</a>.</p>

      <section id="Variables" class="main-section">
        <header class="section-header">Variables</header>
        <p class="section-information">Variables are the buildings for your code.</p>
        <p class="section-information">They can be inputed by the user or preseted by the code.</p>
        <p class="section-information">All variable types:</p>
          <li>String -> texts</li>
          <li>Integer -> whole numbers, both negative and positive</li>
          <li>Float -> real numbers with decimal points</li>
          <li>Booleans -> True or False value</li>
          <li>Lists -> a ordered, mutable collections of values</li>

      <section id="Math_Function" class="main-section">
        <header class="section-header">Math Function</header>
        <p class="section-information">Now that you've declared your first variable, let's get into some basic math functions first of addition:</p>
        <code class="code">a = 6 <br> b = 4 <br> c = a + b</code>
        <p class="section-information">the result of this code would be 10, you can do this with other math problems as well like this: </p>
        <code class="code"> c = a - b | substraction <br> c = a * b | multiplication<br> c = a / b | division
        c = a ^ b | power</code>
        <p class="section-information">You can also combine the functions so make harder problems.</p>


      <section id="Print" class="main-section">
        <header class="section-header">Print</header>
        <p class="section-information">Lets get more familiar with another type of variable, the String using the <strong>Print</strong> function;</p>
        <code class="code">Print("Hello World!")</code>
        <p class="section-information">Though this is a fairly simple function, it is widely use to display result of the code, or the state that the program is in as it can print the current value of a variable at any point like this:</p>
        <code class="code">Print(variable_name)


      <section id="Loop" class="main-section">
        <header class="section-header">Loop</header>
        <p class="section-information">There are two types of loops, <strong>WHILE</strong> loops and <strong>FOR</strong> loops. They are both used widely in the Python languange.</p>
        <code class="code">for i in range(10):<br>print(i) | This code will print out numbers starting from zero till the tenth number printed.<br>i = 1<br>while i != 10:<br>print(i)<br>i = i + 1 | This code function exactly like the previous one, but it checks whether i is equal to 10 and will keep adding 1 after every loop till the condition is met, after which it would stop.</code>

<p class="section-information">Learn more through this <a href="" target="">link</a>.</p>
  box-sizing: border-box;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

@media (min-width: 768px) and (max-width:1400px){
    width: 25vw;

  padding-left: 300px;
  margin: 20px;

  top: 0;
  left: 0;
  border-right: 3px grey solid;
  height: 100%;
  min-width: 250px;
  max-width: 300px;
  text-align: center;

#navbar ul{
  list-style: none;
  height: 90%;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;

#navbar > ul > li{
  height: 30px;
  border-top: 1px solid rgb(29 31 31);
  position: relative;
  width: 100%;

#navbar > ul > li:last-of-type{
  border-bottom: 1px solid rgb(29 31 31);

/*smaller elements*/

  cursor: pointer;
  text-decoration: none;
  color: rgb(104 108 109);

#navbar > header{
  font-weight: 500;
  font-size: 1.8em;

  font-weight: 400;
  font-size: 1.6em;

  font-weight: 200;
  font-size: 0.9em;
  max-width: 90%;
  text-indent: 3px;

  background-color: rgb(30 20 12 / 0.3) ;
  font-family: consolas, monospace;
  border-radius: 3px;
  white-space: pre-line;
  display: block;
  padding: 10px;
  margin: 15px;
  max-width: 65%;

  font-weight: 600;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Hi @SleepDeprived

The links worked for me.
Try using a different browser.

Or save the files to your computer and try it from there.

Happy coding