Margin fantasma encima de un div

[blancoarnau]

Hola a todos. Antes de empezar, quiero aclarar que tengo muy claro todas las propiedades de CSS pero no tengo mucha experiencia en el campo y siempre surgen errores en mi página web.

Mi problema consiste en que aparece un "margin fantasma" encima de unos div que he posicionado en un nav. Aquí tenéis una imagen:



El fondo lo he puesto de color azul porque quería ver si estaba bien posicionado, pero veo que no. Aquí tenéis el CSS:

Código CSS:

body{
    margin:0 0 0 0;
}
nav{
    height:50px;
    width:100%;
    background-color:#1A1C1C;
    text-align:center;
    color:white;
}
.page{
    display:inline-block;
    height:100%;
    width:20%;
    background-color:blue;
}
 

Y el HTML por si acaso:

Código HTML:

<nav>
    <div class="page">Text</div><div class="page">Text</div><div class="page"><img src="logo.jpg"></div><div class="page">Text</div><div class="page">Text</div>
</nav>
 

¿Alguien tiene alguna idea? He intentado de eliminar márgenes y paddings pero no pasa absolutamente nada. ¿Es un error de CSS? Si es así, ¿cómo puedo arreglarlo? GRACIAS :)