Почему у моего первого элемента встроенного блока есть пространство над ним

У меня есть встроенные элементы внутри контейнера, которые должны отображаться в левом верхнем углу контейнера. По какой-то причине первый элемент отображается ниже, где он должен быть. Я попробовал маржи и отступы, но при проверке в любом случае нет полей или прокладок.

вот html (без пробелов, чтобы они не разрушали макет):

 <div class='nav'><div class='logo'><p>test</p></div><ul><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li></ul></div>

вот css:

.nav {
    position: relative;
    width: 80%;
    height: 50px;
    background-color: red;
    z-index: 1;
}
.nav .logo {
    display: inline-block;
    width: 10%;
    height: 100%;
    background-color: #f90;

}
.nav ul {
    display: inline-block;
    width: 90%;
    text-align: center;
}
.nav li {
    display: inline-block;
    height: 100%;
    line-height: 50px;
    width: 20%;
    background-color: grey;
}
.nav li a {
    margin: 0;
}

Вот код, показывающий проблему:

http://codepen.io/Wryte/pen/Guavp

Ответ 1