[Résolu] Alignement des li qui ne se fait pas

Bonsoir, je suis en train de créer un menu horizontale à l'aide de ul et de li, et je suis bien embêté car elle ne se place pas comme je le souhaiterais.
En effet, comme vous pouvez le voir elle se chevauche et çe ne rend pas ce que je souhaiterais.
.

si je descend la petite maison, elle fait descendre le reste, et si je remonte les autres li la maison remonte.
J'ai essayé de les isoler par des classes et mon défaut demeure.
Je vous mets les code en suivant :
mon fichier html :

<nav>
<ul>
    <li ><a href="#"><img src="url.png"></a>
    <li><a href="#">About</a></li>
    <li><a href="#">Maintenance</a></li>
    <li><a href="#">Repair</a></li>
    <li><a href="#">Price List</a></li>
    <li><a href="#">Locations</a></li>
</ul> 
</nav>

mon fichier CSS

ul {
    background: linear-gradient(to bottom, rgba(221,223,227,1) 0%,rgba(245,246,246,1) 42%,rgba(245,246,246,1) 66%,rgba(184,186,198,1) 100%); /* W3C */;
    height: 50px; 
}
li {
    height: 100%;
    list-style: none;
    display: inline-block;
    border-right:2px solid white;
    padding-right: 15px;
    padding-left: 15px;
}
li:first-child
{border-left: 2px solid white;
padding-right: 15px;}

Qui pourrait m'éclairer ?

Cdt
Squeek

Merci, effectivement, là elle se cale bien reste plus qu'a jouer sur le padding-top pour le faire redescendre !