I cannot understand this.. kindly help

I want the blue and red boxes to align with like colours beneath but there seems to be this gap that always persist (even with gap 0). and it seems impossible to center this entire layout vertically (the entire layout , without 100% height of viewport). Can someone explain why and suggest some possible solutions with explanations? I hope you kindly cooperate since i am still on my learning phase.