Can't click on my navigation links - html

Question

Hello I'm a beginner and got a problem with my navigationbar in HTML. I've tried a lot but they are still unclickable...
Is there a mistake in my HTML?
<header>
<nav display: inline;>
<ul>
<li>
<navi><img src="images/header_logo.png" alt="Logo" href="index.html" width="40%" height="40%" /></navi>
</li>
<li>
<navi>
<z class="active" href="index.html">Startseite</z>
</navi>
</li>
<li>
<navi>
<z href="produkte.html">Produkte</z>
</navi>
</li>
<li>
<navi>
<z href="about.html">Über uns</z>
</navi>
</li>
<li>
<navi>
<z href="agb.html">AGB</z>
</navi>
</li>
</ul>
</nav>
or is the mistake in my CSS? It's probably not the best way to style it but it looks good in my eyes. However I cant click any links...
body {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
}
ul {
margin: 0px;
list-style: none;
padding: 0px;
overflow: hidden;
background-color: burlywood;
}
li navi {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li navi z {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li z:hover:not(.active) {
background-color: #deb27a;
}
Thanks for help

Answer 1

Here's the link for Your above Problem https://jsfiddle.net/kj0w9g76/
Reason:- for anchor tag we use 'a' not with 'z'
instead of navi tag we use nav tag as used in code below.
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
ul {
margin: 0;
list-style: none;
padding: 0;
overflow: hidden;
background-color: burlywood;
position: relative;
z-index: 1;
}
li nav {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li nav z {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li a:hover:not(.active) {
background-color: #deb27a;
}
<header>
<nav style="display: inline;">
<ul>
<li>
<nav><a href="index.html" width="40%" height="40%" ><img src="images/header_logo.png" alt="Logo"/></a></navi>
</li>
<li>
<nav>
<a class="active" href="index.html">Startseite</a>
</nav>
</li>
<li>
<nav>
Produkte
</nav>
</li>
<li>
<nav>
Über uns
</nav>
</li>
<li>
<nav>
AGB
</nav>
</li>
</ul>
</nav>
</header>

Answer 2

You've a problem in your code, styles, anchors are not correct there is the correct code below.
* {
box-sizing: border-box;
}
body {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
}
ul {
margin: 0px;
list-style: none;
padding: 0px;
overflow: hidden;
background-color: burlywood;
}
li nav {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li a {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li a:hover:not(.active) {
background-color: #deb27a;
}
<header>
<nav style="display: block;">
<ul>
<li>
<nav><img src="images/header_logo.png" alt="Logo" href="index.html" width="40%" height="40%" /></nav>
</li>
<li>
<nav>
<a class="active" href="index.html">Startseite</a>
</nav>
</li>
<li>
<nav>
Produkte
</nav>
</li>
<li>
<nav>
Über uns
</nav>
</li>
<li>
<nav>
AGB
</nav>
</li>
</ul>
</nav>
</header>