Wie entsteht diese (eingezeichnete) HÖHE???

[einsiedler]

Kann mir bitte mal jemand erklären wie diese pi___ss (gelb eingezeichnete HÖHE entsteht?

Nirgens habe ich ein margin / padding / hight angegeben?

Ich habe festgestellt das das NUR entsteht wenn ich " #MainNavi li:nth-child(1n) " ... usw. angebe....... dann entsteht diese blöde untere HÖHE (gelb)

Was stimmt da nicht, wenn man dann eine height: 1.9em; angibt dann ist es weg, das kann aber doch nicht die Lösung sein, oder???

#MainNavi {
		display: flex;
		
			flex-direction: row;
				
			flex-wrap: wrap;
			
			justify-content: space-around;
			
			background-color: rgb(255,255,255);
			background-color: rgba(255,255,255,.22);
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=22)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=22);
			z-index: 1;
			
			border: 2px solid orange;
		}

#MainNavi li:nth-child(1n)  {display: flex; flex: 1.1; justify-content: center; align-items: center; border: 1px dotted yellow;}
#MainNavi li:nth-child(2n){display: flex; flex: 1.4; justify-content: center; align-items: center; border: 1px dotted yellow;}
#MainNavi li:nth-child(3n), #MainNavi li:nth-child(4n) {display: flex; flex: 1; justify-content: center; align-items: center; border: 1px dotted yellow;}
#MainNavi li:nth-child(5n) {display: flex; flex: 2.8; justify-content: center; align-items: center; border: 1px dotted yellow;}
		
#MainNavi li a:link {
		color: black;
		font-size: 22px;
		font-size: 1.375rem;
		line-height: 100%;
		text-decoration: none;
		list-style-type: none;
		}
		
#MainNavi li a:hover {
		color: mediumblue;
		font-size: 22px;
		font-size: 1.375rem;
		line-height: 100%;
		text-decoration: underline;
		font-weight: bold;
		list-style-type: none;
		}

hier mal ein Link zum Projekt: Projektseite

Gruss t.