Casi todo en esta vida es posible ;)
de poder ajustar las cajas al ancho de la imagen, se puede, solo tienes que hacer que el tamaño de tu caja + el margen que tiene te de un valor en pixeles, lo multiplicas por 3 y ese valor tiene que ser igual al ancho de tu imagen
en lo personal, no lo hago asi, ya que la tendencia del diseño actualmente es hacer que tu web quede lo mas parecido a la maqueta, mas no igual (hablando de la estetica con la posicion de los elementos), ya que la tendencia en este momento es que tu web pueda ser adaptable ante cualquier dispositivo que uses (relular, tablet, laptop, etc.) y porporcionarle la mejor experiencia al usuario de navegar en tu web, todo esto se puede logran con diferentes tecnicas, yo actualmente conosco los MediaQueries, son instrucciones que se le ponen hasta la parte final de la hoja de estilo y funciona, revisa nuevamente el ejemplo que te puse y juega con el ancho donde se ve la pagina web, veras que tendra 2 transformaciones, 1 cuando el ancho de la web sea de 700px y el otro de 600px
te dejo el link
http://codepen.io/elestudiantefantasma/pen/Ekxov
antes de que empieces con esto, te recomiendo que practiques mas html y css, ya cuando te sientas mas seguro, podras comenzar con estos temas, para ese intonces, investiga un poco sobre el diseño Liquido o Responsive, intenta ver algunos conceptos que usan para el posicionamiento de elementos en la pagina
ojo, todo a su tiempo, solo cuando te consideres listo para empezar, no hay mucha ciencia en eso, pero, si se te dificulta maquetar (caminar), se te hara mucho mas dificil hacer las cosas responsive (Correr).