En este caso vamos a hacer dos cosas:
header{ width:1000px; margin:0 auto; position:relative; font-family:alegreya-light; font-size:24px; color:white; }
Con width:1000px; definimos la anchura total del <header>.
Con margin:0 auto; centramos horizontalmente los 1000 píxeles en la anchura de la ventana del navegador.
Con position:relative; conseguiremos que, después de colocar la franja gris debajo, el <header> esté por encima de la misma (y no por debajo como sería lo normal).
#franja{ width:100%; position:absolute; top:0; left:0; height:60px; background-color:#313B44; border-bottom:6px black solid; }
width:100%; especifica que la franja ocupe todo el ancho de la ventana del navegador.
position:absolute; permite ubicar este <div> en una posición concreta, al mismo tiempo que permite superponer diferentes divs en la misma coordenada.
Con top:0; y left:0; ubicamos de manera precisa la franja gris en la esquina superior izquierda de la ventana del navegador.
Con background-color:#313B44; especificamos el color gris (#313B44) de fondo.
height:60px; es imprescindible indicar la altura de la franja, ya que este <div> al no tener ningún contenido no se mostraría.
border-bottom:6px black solid; coloca un borde inferior negro con un grosor de 6 píxeles.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Quiénes somos</title>
<link rel=stylesheet href="css/estilos.css" type="text/css"/>
<style type="text/css">
</style>
</head>
<body>
<div id="franja"></div>
<header>
<img src="img/logo.png" align="center">
Aprende jugando, S.L.
</header>
<nav>
<ul>
<li><img src="img/icono1.png" align="top"><p>
Quiénes somos</li>
<li><img src="img/icono2.png" align="top"><p>
<a href="servicios.html">Servicios</a></li>
<li><img src="img/icono3.png" align="top"><p>
<a href="contacto.html">Contacto/a></li>
</ul>
</nav>
<section id="contenido">
<div>
<h2>Quiénes somos</h2>
</div>
<article id="cuadro1" class="cuadros">
<div id="imagen1">
<img src="img/imagen1.png">
</div>
<h3>Con vocación educativa</h3>
Somos una empresa compuesta por <b>maestros, pedagogos,
guionistas y especialistas en las nuevas tecnologías</b>
aplicadas a la educación para ofrecerle los mejores
servicios.
<p>
Anteponemos la educación a la tecnología.
</article>
<article id="cuadro2" class="cuadros">
<div id="imagen2">
<img src="img/imagen2.png">
</div>
<h3>Con larga experiencia</h3>
Llevamos <b>desde 1998</b> ofreciendo propuestas
diferentes y acciones educativas concretas a escenarios
diversos.
<p>
Diseñamos una solución educativa creativa a su problema
cotidiano.
</article>
<article id="cuadro3" class="cuadros">
<div id="imagen3">
<img src="img/imagen3.png">
</div>
<h3>Con entusiasmo y motivación</h3>
La <b>motivación</b> y el <b>entusiasmo personal</b>
mueve montañas y es lo que nos hace diferentes. El
disfrutar por lo que hacemos nos distingue.
<p>
Pruébenos una vez y se convencerá para siempre.
</article>
</section>
<footer>
©2015. Aprende jugando, S.L.<br>
c/ del Álamo rojo, 1, local. Barcelona.
</footer>
</body>
</html>
Aunque se podría pensar que se sigue el mismo proceso que acabamos de seguir con la franja inicial, lo cierto es que es necesario algo más de código por el mero hecho de estar al final, y no al principio.
En la siguiente actividad de este tema: