La page de tous les problèmes ! ※ La barre de navigation riquiqui

Rebonjour à tous pour encore un nouveau problème ! Cette fois-ci, je bute sur une barre de navigation (voir mes autres problèmes avec cette #!%* barre )

Fait étrange : Ma barre de navigation est très bien reliée à mon css, et je lui ai mis une couleur, une largeur, une bordure... Mais quand il s'agit de modfier la hauteur, ça ne fonctionne plus ! Je peux modifier la police, la taille des caractères, les bords... Mais pas l'attribut

height

!

ce qui fait que je me retrouve avec une barre toute riquiqui !



Mon code html :

<span>
   <ul style="display:inline">
    <li><img class="logo" style="vertical-align:middle" src= "logolarge.png" alt="logo de Bar'ParKs"></li>
    <li class="active"><a  href="http://www.barparks.com/page_acceuil">- ACCEUIL -</a></li>
    <li><a href="http://www.barparks.com/qui-nous_sommes">- QUI SOMMES-NOUS ? -</a></li>
    <li><a href="http://www.barparks.com/commander">- COMMANDER -</a></li>
    <li><a href="http://www.barparks.com/photos">- PHOTOS -</a></li>
    <li><a href="http://www.barparks.com/commantaires">- COMMENTAIRES -</a></li>
    <li><a href="http://www.barparks.com/contact">- CONTACT -</a></li>
   </ul>
  </span>

Et le css :

@font-face{ 
	font-family: 'subway';
	src: url('Subway-Black.eot');
	src: url('Subway-Black.eot?#iefix') format('embedded-opentype'),
	     url('subway-black-webfont.woff') format('woff'),
	     url('Subway-Black.ttf') format('truetype'),
	     url('Subway-Black.svg#Subway-Black') format('svg');
}



body {
	background-image: url(https://149359637.v2.pressablecdn.com/wp-content/uploads/2017/10/Not-Just-Another-Brick-on-the-Wall-Mural-MU1409-1-min.jpg);
}

h1 {
	color: black;
	margin-left: 20px;
	font-family:subway, sans-serif;
}


ul {
	
	display:table;
	border: 1px solid #555;
    margin: 10px;
    padding: 10px;
    width: 97%;
	height: 200px;
    background-color: #f1f1f1;
	top: 100; left: 0;
	border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
}


li {
	
	font-family: subway;
	font-size: 1em;
	height: 200%;
	display: table-cell;
	transition: padding .3s;
	padding: 0px 8px 0px 8px;
}

li a {
	
	display:table-cell;
	text-align: center;
	width: auto;
    color: #000;
    padding: 2px 8px 2px 8px;
    text-decoration: none;
	

}

li.active {
    display: table-cell;
	background-color: #7CFC00;
    color: white;

}

li:hover:not(.active) {
	display: table-cell;
	background-color: #555;
    color: white;
	padding: 0px 25px 0px 25px;
	border: 1px solid #444;
}



.logo {
	text-align: middle;
	height: 70px;
	width: 70px;
}

.banner {
	
	position: fixed;
}





.texte_barre {
	display:inline-block;
	border: 1px solid #555;
    list-style-type: none;
    margin: 10px;
    padding: 10px;
    width: 97%;
    background-color: #f1f1f1;
	border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
	top: 500px;
	
}

Je vous serai très reconnaissant de me répondre ! Merci d'avance !