CSS formatierung nicht richtig, was falsch?

Hey,
Kurz und Knapp. So sollte es von feld zu feld aussehen
[Only registered and activated users can see links. Click Here To Register...]

und zur anderen seite sieht es so aus
[Only registered and activated users can see links. Click Here To Register...]

also das schwarze dazwischen

code

HTML Code:

	<div id = "navi">
		<ul>
			<li class = 'on'><a href = 'index.php'>Startseite</a></li>
			<li><a href = 'info.php'>Informationen</a></li>
			<?php
			if(isset($_SESSION["username"])){
			echo "<li><a href = 'abrechnen.php'>Abrechnen</a></li>";
			}
			?>
			<li><a href = 'mitglieder.php'>Memberliste</a></li>
			<?php
			if(!isset($_SESSION["username"])){
			echo "<li><a href = 'login.php'>Login</a></li>";
                        echo "<li><a href = 'bewerben.php'>Bewerben</a></li>";
			}
			else
			{
			include("umsatz.php");
			
			echo "<li><a href = 'ausloggen.php'>=> Abmelden</a>" . "</li>";
			}
			?>
		</ul>
	</div>

und das CSS

Code:

#navi{position: center; margin:0; padding:0;}
#navi ul{list-style: none; margin: 0; padding: 0; background-color: #000; text-align: center; width: 100%;}
#navi ul li{display: inline-block; margin: 0; padding: 0; color: white;}
#navi ul li a{position: relative; display: block; padding: 25px 25px 25px 25px; color: white; text-decoration: none; z-index: 1;}
#navi ul li a::before{content:''; position: absolute; left: 0; top: 0; height: 0; width: 100%; background-color: #3bb631; transition: all 250ms;}
#navi ul li a:hover::before{height: 100%; z-index: -1;}