.cuadros{ float:left; width:240px; border:1px lightgray solid; border-radius:3px; background-color:white; text-align:center; padding:5px 5px 22px 5px; box-shadow:0px 0px 4px gray; }
Con sólo esta línea (float:left;) todos los <article> (que tienen el class="cuadros") se alinean uno al lado del otro, empezando por la izquierda.
#cuadro2{ margin:0 112px 0 112px; }
Para solucionar esto, en vez de ponerle márgenes de separación a los 3 cuadros, le estamos poniendo un único margen izquierdo y uno derecho (ambos de 112px) sólo al cuadro que se encuentra en el centro (cuadro2).
<article id="cuadro2" class="cuadros">
<div id="imagen2" class="imagenes">
<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>
El class y los id tanto de <article> como del siguiente <div> fueron completados en el tema 9: Bordes y bordes redondeados.
footer{ clear:both; font-family:alegreya-light; font-size:13px; color:silver; }
Ahora vamos a añadir una línea de código fundamental al utilizar float.
Al utilizar float podemos dejar espacios vacios a la derecha (o izquierda) del último div recolocado con float:left, por lo que la siguiente caja puede colocarse en esta posición vacía.
Para indicar a un div que NO aproveche este espacio vacío, sino que se coloque (abajo) en una línea nueva utilizamos clear:both;