Error en maqueta HTML

[fede5426]

El error está en que tiene todos los elementos con display: inline-block;.

Si lo que querias lograr es algo como esto:



Tenés que meter en un contenedor lo que quieras a la izquierda, y en otro contenedor lo que quieras a la derecha, y solamente a esos 2 le aplicas display: inline-block; junto con vertical-align:top; para que estén alineados por la parte superior.

Algo asi:

Código HTML:

<div class="contenedor">
  <div class="izquierda">
    <div class="logo"></div>
    <div class="menu"></div>
  </div>
  <div class="derecha">
    <header></header>
    <header></header>
    <nav></nav>
    <div class="contenido"></div>
  </div>
  <footer></footer>
</div>
 

Código CSS:

.izquierda,
.derecha{
  width:25%;
  display:inline-block;
  vertical-align:top;
}
 
.derecha{
  width:75%;
}
 

http://codepen.io/anon/pen/yNOewM

Te lo dejo armado en un codepen para que lo revises.. pero no está del todo terminado, lo hice muy rápido sólo para que te des una idea de más o menos cómo va.