Image goes down inside navbar - html

Question

In the code below, I have a navbar where I specify the height to be 40px, in #nav {... height:40px;} On the left of this navbar, I put a logo image. To make everything fit, I have resized the image to have height 40px also. Yet, as can be seen in the demo, the image goes down and is partially hidden.
What am I doing wrong ?
body {
background: #666;
color: white;
font-family: Helvetica;
}
a {
color: white;
text-decoration: none;
}
ul {
padding: 0;
}
#container {
background: #333;
width: 400px;
margin: 30px auto;
overflow: hidden;
}
#nav {
background: #666;
height: 40px;
}
#nav ul {
padding-top: 13px;
padding-left: 10px;
}
.lileft .li {
list-style: none;
float: left;
}
.lileft img {
display: block;
}
#nav li {
list-style: none;
float: right;
padding-right: 20px;
}
<div id="container">
<div id="nav">
<ul>
<lileft><img src="https://i.ibb.co/WVxqWc7/crown.png" alt="crown" border="0"></li>
<li>Pears</li>
<li>Grapes</li>
<li>Apples</li>
<li>Oranges</li>
</ul>
</div>
</div>

Answer 1

It's cause you have padding-top on your ul which is affecting the first-child (image).
Set the padding on the li instead and exclude the :first-child using the :not() pseudo-class.
body {
background: #666;
color: white;
font-family: Helvetica;
}
a {
color: white;
text-decoration: none;
}
ul {
padding: 0;
}
#container {
background: #333;
width: 400px;
margin: 30px auto;
overflow: hidden;
}
#nav {
background: #666;
height: 40px;
}
#nav ul {
padding-left: 10px;
}
#nav ul > li:not(:first-child) {
padding-top: 13px;
}
#nav li {
list-style: none;
float: right;
padding-right: 20px;
}
<div id="container">
<div id="nav">
<ul>
<lileft>
<img src="https://i.ibb.co/WVxqWc7/crown.png" alt="crown" border="0">
</lileft>
<li>Pears</li>
<li>Grapes</li>
<li>Apples</li>
<li>Oranges</li>
</ul>
</div>
</div>