margin: 0 auto;

これで親要素に対して .box2 が左にズレるってことですが、

margin-left: auto;

これは、 .box1 の余白（ margin )の一番左ってことですが、なんで right じゃないんでしょうか。