Diseño fluido

[sergi_multimedia]

Hola a todo el mundo, estoy diseñando una web por primera vez en unidades relativas.

No intento hacer una web adaptable a los móviles, simplemente que se visualice igual en todos los dispositivos.

Como podéis ver en la web que he puesto debajo, si la veis desde un ordenador veréis que hay 4 bloques de la derecha de la imagen (de color azul y verde). Debajo sobra un espacio en rojo (etiqueta "header"). Pero si visualizáis la web en un iPhone por ejemplo, los 4 bloques ocupan más que la imagen.

Veréis que en el código, he puesto que cada uno de los 4 bloques tengan un porcentaje de altura, sumando los 4 un 100%.

Yo simplemente quiero que se vea el logotipo a la izquierda, y luego el conjunto de los 4 bloques ocupen el mismo largo que el logo, pero sin utilizar pixeles, porqué sino la etiqueta "header" me ocupa más de la mitad de la pantalla del iPhone.

http://sergibeltran.com/jim3/#

Código HTML:

<header>
    <div id="logo"><img src="img/logo.png" alt="logo"></div>
        <h1 id="title">Guardian Pro Cables</h1>
        <h1 id="subtitle">High Quality Instrument Cables</h1>
        <h1 id="slogan">Protect Your Sound</h1>
        <nav>
         <ul>
           <li>Home</li>
           <li>Cables</li>
           <li>About</li>
           <li>Artist</li>
           <li>Contact</li>
          </ul>
      </nav>
</header>
 

Código CSS:

html {
    font-size: 1em;
    font-family: verdana;
}
 
body {
    margin: auto;
    padding: 2.5%;
    max-width: 960px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
 
header {
    width: 100%;
    background-color: red;
    overflow:hidden;
}
 
header #logo {
    float: left;
    width: 19.79%;
}
 
header #logo img {
    width: 100%;
}
 
header h1#title {
    float: left;
    width: 80.40%;
    background-color: blue;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 1em;
    height: 40%;
}
 
header h1#subtitle {
    float: left;
    width: 80.40%;
    background-color: green;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 1em;
    height: 20%;
}
 
header h1#slogan {
    float: left;
    width: 80.40%;
    background-color: blue;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 1em;
    height: 20%;
}
 
header ul {
    padding: 0;
    margin: 0;
    float: left;
    width: 80.40%;
    background-color: green;
    list-style-type: none;
    height: 20%;
}
 
header ul li {
    background-color: yellow;
    width: 20%;
    float: left;
    text-align: center;
}
 

Saludos, y gracias de antemano.