Q:

Remove space after an display inline-block list

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"> <a href="#"><img src="res/logo.png"></a>
    <ul id="main_navigation_ul">
        <li>Navigation
            <div id="menu_symbol" onclick="nav_toggle()">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <hr>
        </li>
        <li><a href="google.de">Home</a>
        </li>
        <li><a href="#">Projects</a>
        </li>
        <li><a href="#">About me</a>
        </li>
        <li><a href="#">Imprint</a>
        </li>
    </ul>
</nav>

JSFIDDLE
You can see the space very good by hovering over the nav points.

A:

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

