赤は上下のmargin:100px、青は上下のmargin:100pxです。#headerと#footerには上下にmargin:50px入れていますがheaderの子要素のh1（赤）とfooterの子要素#box2（青）のmargin:100pxが相殺されてheader内とfooter内のmarginは０となりそれぞれの外側に相殺された値分だけ100pxのマージンが取られます。解決策としてheaderとfooterにボーダーを付けました。これでh1と#box2のマージンは正常にheaderとfooter内で取られ、headerとfooterのマージンは指定したマージン50pxとなりました。