.box2 {
  ...
  padding-top: 20px;
  padding-left: 40px;
}

なぜ、 Box2 は領域の上側に位置しているのでしょうか。

上と左に余白を作るので、
Box2 は、右下に位置すると想像しました。