title: HTML link can't be clicked
body: <p>A link on a "navbar" on my website can't be clicked for some reason and I can't seem to find the reason why. It is in the viewport(Here is the link to the website:<a href="https://codetheworld.000webhostapp.com/" rel="nofollow noreferrer">https://codetheworld.000webhostapp.com/</a>. The link on the website is supposed to be the "Learn to code" button). One interesting thing is that, once I open an inspect element window, it works. Here is the code snippet for just the navbar:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#first {
    margin-top: 500px;
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    top: -1150px;
    left: 100px;
    z-index: 4;
  }
  
  li a {
    width: 200px;
    height: 50px;
    font-size: 2em;
    text-decoration: none;
    color: white;
    font-family: Georgia, serif;
    padding: 10px;
    border: 2px solid white;
    border-radius: 7px;
    text-align: center;
    line-height: 30px;
  }
  
  li a:hover {
    background-color: grey;
    color: white;
    text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="first"&gt;
    &lt;li&gt;&lt;a href="tutorial.html"&gt;Learn to code&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>