导航栏链接无响应，可在Codeply中使用

Question

在过去的两周里，我一直在构建一个个人网站项目，而在过去的两周中，我一直在构建一个响应式导航栏，其中的链接一直运行良好，但是今天它们突然停止了工作，甚至无法点击/当您将鼠标悬停在它们上时，它什么也不做，并且我没有更改任何直接代码以在HTML或CSS文件中使用它们。

我将相关代码复制粘贴到Codeply中，并且在那里可以正常工作，其中的链接具有：hover效果并且是可单击的，完全有效的链接，但是在我的html / css文件上它们无法正常工作，并且我对为什么有点困惑。 任何帮助，将不胜感激！我已经提供了一个Codeply链接（我认为，我对Stackoverflow格式是不熟悉的），向您展示它的工作原理。 非常感谢！

https://www.codeply.com/go/23Sj6QOlXK

body { 
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
overflow-x: hidden;
}

p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

.fa, .fab, .fal, .far, .fas {
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
color: white;
}

a {
color: white;
}


.fas:visited {
color: purple;
}

header {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color:rgb(35, 35, 43, 0.5);
width: 100%;
height: 70px;
position: absolute;
border-bottom: 1px solid #dedede;
}
  
header .header-brand {
font-family: 'Raleway', sans-serif;
font-size: 42px;
font-weight: 900;
color: rgb(255, 255, 255);
text-transform: uppercase;
display: inline;
margin: 0 auto;
text-align: center;
padding: 20px 20px;
text-decoration: none;
}


.span1 {
font-family: 'Raleway', sans-serif;
font-size: 42px;
font-weight: 900;
color: red;
text-transform: uppercase;
display: inline;
margin: 0 auto;
text-align: center;
text-decoration: none;
}

.span2 {
font-family: 'Quicksand', sans-serif;
font-size: 42px;
font-weight: 900;
color: red;
text-transform: uppercase;
display: inline;
margin: 0 auto;
text-align: center;
text-decoration: none;
}
    



/* 3 smaller links on right */
header div ul {
font-family: 'Alegreya Sans', sans-serif;;
font-size: 186px;
color: red;
text-transform: uppercase;
text-align: center;
display: inline-block;
margin: 0 auto;
float: right;
transform: translateY(-45px);
z-index: 9999999999;
  
}
  
header div ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 18px;
color: white;
text-transform: uppercase;
display: inline-block;
list-style: none;
padding: 0 16px;
z-index: 9999999999;
}
  
header div ul li a {
font-family: 'Alegreya Sans', sans-serif;
font-size: 18px;
color: white;
text-transform: uppercase;
z-index: 9999999999;
}

header div ul li a:hover {
color: rgb(224, 70, 70);
text-decoration: underline;
}
  
@media screen and (max-width: 760px) {
  .hideLink {
      display: none;
  }
}


/* Hide the button that should open and close the topnav on small screens */
.icon {
  display: none;
  padding: 15px;
}




/* When the screen is less than 800 pixels wide, hide all links, except for  first one . Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
  div ul li:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    padding-right: 15px;
  }
}

/* add "responsive" class to  topnav with javascript when you click on the icon.(display the links vertically)*/
@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive ul li a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive ul li {
    background-color:rgb(35, 35, 43, 0.5);
    border: 1px solid #dedede;
    float: none;
    display: block;
    text-align: left;
  }
}

<header>
    <a href="index.html" class="header-brand"> AB <span class="span1">|</span> <span class="span2">CODING</span></a>
    <div class="topnav" id="myTopnav">
        <ul>
        <li class="hideLink"> <a href="#main-footer">Contact</a> </li>
        <li class="hideLink"> <a href="#projectsPart">Projects</a> </li>
        <li class="hideLink"> <a href="#main-footer">About me</a> </li>
        <li> <a href="files/documentTest1.rtf" download="">Resume <i class="material-icons" style="transform: translateY(7px);">&#xe2c4;</i></a></li>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
        </a>
        </ul>
    </div>
</header>