html - top navbar is not clickable

Question

I am trying to write a website(it's my first time), but I have problem. I have a simple navbar on the top, which is not clickable(i open up in google chrome). I had try adding z-index before, but it still do not work too.

Here is my navbar code and Css :

#header {
  height: 100vh;
  background-image: url(image/dashboard.png);
  background-position: center;
  background-size: cover;
  background-color: rgba(226, 29, 57, 0.1);
}

.container {
  margin-right: 100px;
  margin-left: 100px;
}

.logo {
  margin-top: 20px;
  width: 100px;
}

.topNav {
  width: 100%;
  margin: 0;
  padding: 0px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topNav ul li {
  list-style: none;
  display: inline-block;
  margin: 0 20px;
}

.topNav ul li a {
  text-decoration: none;
  color: rgb(26, 26, 26);
  font-size: 21px;
}

<section id="header">
  <div class="container">
    <div class="topNav">
      <img src="image/logo.png" class="logo">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#user guide">User Guide</a></li>
        <li><a href="#feature">Features/Download</a></li>
      </ul>
    </div>
  </div>
</section>

question from:https://stackoverflow.com/questions/65660725/top-navbar-is-not-clickable

Answer 1

Waitting for answers