Esto es básicamente por dos cosas:
1.- el contenedor general (<div class="todo">) sigue siendo en porcentaje, entonces como los dos bloques de la cabecera tienen tamaño fijo en px, en cuanto no caben deben saltar a la siguiente línea. Esto se suele arreglar por ejemplo poniendo la imagen de la moto como fondo de la caja de cabecera en lugar de la imagen insertada, de tal manera que cuando reduces la ventana hay en realidad un sólo elemento, y entonces la moto no saltaría a la siguiente línea, sino que iría desapareciendo por debajo del bloque de la izquierda.
2.- Cuando quieres construir una estructura líquida de tres columnas, con los lados fijos y el centro adaptable, lo que debes hacer es poner primero la columna de la derecha con float right; luego la de la izquierda con float left y luego la central sin float ni tamaño. De esa manera, la central siempre ocupa exactamente el espacio que le quede disponible reduciendo y ampliando si nada se lo impide.
Lo de las otras secciones no lo he entendido bien pero masca un poco esto que te digoy luego vemos lo otro.