Cita: La cosa es que caja2 y caja 3 se posicionan dejando un espacio en blanco a su izquierda. ¿Podéis explicame porqué?
Sin entrar en otras cuestiones de su código, pues sólo está probando, apostaría que el espacio que dejan entre sí es de 10px, y el de caja 2 con el borde de su ancestro es de 5px, ni uno más ni uno menos.
Y no, no soy adivino, es lo que le dice que deben hacer en su código ;)
Cita: .caja2{width:50px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}
.caja3{width:50px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}