Ya he dado con la respuesta.
No recordaba que el header tenia un ancho definido tan pequeño para el tamaño del logo. Le he aumentado a 1070px y luego la clase right le he flotado a la izquierda añadiéndole un padding-left y voila!!!
aqui os dejo el código y el codepene:
http://codepen.io/elcollage_com/pen/rOPPbo Código HTML:
<section>
<header>
<nav>
<ul class="left">
<li>CLASES de ACORDEÓN</li>
<li>PROFESORADO</li>
</ul>
<ul class="right">
<li>ACORDEONES</li>
<li>CONTACTO</li>
</ul>
</nav>
<div class="logoh1"></div>
</header>
</section>
Código:
.logoh1 {
text-indent:-99999px;
width: 338px;
height: 340px;
background: url('http://www.elcollage.com/isra/etxepare/prueba-logo.jpg');
display: block;
position: absolute;
top: 18%;
margin-right: auto;
margin-left: auto;
left: 0;
right: 0;
opacity: .1;
}
body {
background: #fff;
font-family: arial;
}
header {
width: 1170px;
margin: 0 auto;
text-align: center;
position: relative;
}
nav li{
display: inline-block;
padding: 40px 30px 40px 0;
}
.left {
float: left;
text-align: left;
}
.right {
float: left;
padding-left: 380px;
}
gracias de todos modos y espero que a alguien le pueda valer