Navbar not working like on the other subpages - html

Question

I got a website where I have a couple of subsites. All connected with a navbar. This navbar is styled with CSS and connected with a class to an unordered list. As I'm adding a new Subpage and want to add the CSS to the navbar, it makes the background of it really tall.
I tried to create an additional class for this "special navbar" and copied and pasted the CSS code of the original class in the new "special class". After I did this I tested it but the CSS code didn't even do anything. If anyone could help me I would flutter.
Thanks in advance.
.nav {
list-style-type: none;
margin: 0;
padding: 40;
overflow: hidden;
background-color: #333;
}
.li {
float: left;
}
.a {
display: block;
text-align: center;
padding: 14px 16px;
color: white;
}
#active {
background-color: lightskyblue;
color: black;
}
a:link {
text-decoration: none;
}
a:hover {
background-color: #111;
color: white;
}
a {
color: black;
}
<ul class="nav">
<li class="li">Home </li>
<li class="li">Stundenplan SJ 22/23</li>
<li class="li"> über mich </li>
<li class="li"> Meine Lieblingsseiten</li>
<li class="li"> Taschenrechner</li>
<li class="li" style="float:right"> Beispielseite Herr Stocki </li>
</ul>

Answer 1

never use float unless you absolutely have to. Use flexbox for your nav
.nav {
display:flex;
list-style-type: none;
margin: 0;
padding: 40;
overflow: hidden;
background-color: #333;
}
.a {
display: block;
text-align: center;
padding: 14px 16px;
color: white;
}
#active {
background-color: lightskyblue;
color: black;
}
a:link {
text-decoration: none;
}
a:hover {
background-color: #111;
color: white;
}
a {
color: black;
}
<ul class="nav">
<li class="li">Home </li>
<li class="li">Stundenplan SJ 22/23</li>
<li class="li"> über mich </li>
<li class="li"> Meine Lieblingsseiten</li>
<li class="li"> Taschenrechner</li>
<li class="li" style="float:right"> Beispielseite Herr Stocki </li>
</ul>