HTML link can't be clicked - html

Question

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:https://codetheworld.000webhostapp.com/. 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:
#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;
}
<ul id="first">
<li>Learn to code</li>
</ul>

Answer 1

You positioned your element outside of the viewport, so it can't be clicked.
Remove the margin-top & top positioning and everything will work:
#first {
background: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
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;
}
<ul id="first">
<li>Learn to code</li>
</ul>

Answer 2

Well, you have a <div id="up2"> and it's right over your button. That's the reason why you can't click that button.
You could increase the top value of your div#up2 and edit/decrease the top values of the elements in the div#up2.

Answer 3

#Alessi 42 commented the correct solution, however Dekel was the one who posted it.
I did a fiddle and verified certainty: https: // jsfiddle.net / drpeck / tgeyfpd8 /
So learning from the experience I would say:
First test with and without CSS, and once you have determined that without CSS the element appears.
Start introducing CSS selectors and add/removing the different attributes
Once you find the attribute that is affected proceed to play with the values.
For my own sake, although not required, having the absolute path always helps me personally to avoid any unexpected misunderstanding (in other words to have clarity), even if the file is under the root directory. i.e:
Insted of this: href="tutorial.html" I would do href="./tutorial.html"