Remove space after an display inline-block list - html

Question

It's strange, my unsorted list with display: inline-block is inside an height: auto div element. But the div is 3px higher then the unsorted list. Do someone see the problem ?
html, body {
margin: 0;
width: 100%;
height: 100%;
font-family: monospace;
}
#main_navigation {
width: 100%;
background-color: #3e3e3e;
text-align: center;
}
#main_navigation img {
height: 5em;
width: 5em;
position: absolute;
left: 1em;
top: 0.5em;
}
#main_navigation ul {
padding: 0px;
margin: 0 auto;
display: inline-block;
}
#main_navigation ul li {
padding: 2em;
list-style-type: none;
display: table-cell;
border-left: 1px solid #000;
}
#main_navigation ul li:hover {
background-color: #e04100;
}
#main_navigation ul li:first-child {
display: none;
}
#main_navigation ul li:nth-child(2) {
border: none;
}
#main_navigation ul li a {
font-size: 1.75em;
color: #cecece;
padding: 2em;
text-decoration: none;
}
<nav id="main_navigation"> <img src="res/logo.png">
<ul id="main_navigation_ul">
<li>Navigation
<div id="menu_symbol" onclick="nav_toggle()">
<div></div>
<div></div>
<div></div>
</div>
<hr>
</li>
<li>Home
</li>
<li>Projects
</li>
<li>About me
</li>
<li>Imprint
</li>
</ul>
</nav>
JSFIDDLE
You can see the space very good by hovering over the nav points.

Answer 1

Change the vertical-align value on your list: Fiddle example
#main_navigation ul {
padding: 0px;
margin: 0 auto;
display: inline-block;
vertical-align: top;
}

Answer 2

The extra pixels come from the fact that the element with display: inline-block is an inline element, so it will be treated as a character on a text line.
The element is placed on the base line of the text line, and there is space below the base line for hanging characters like j and g. That's where the extra pixels come from.
From what I can tell, you can just remove the display: inline-block style without any problems.