#modal {
  background: #fff;
  width: 300px;
  padding: 20px;
  border-radius: 4px;
  position: absolute;
  top: 40px;
  /* left: 0; */  
  /* right: 0; */
  margin: 0 auto;
}

👆のコードなのですが、#modalを中央揃えにするために、なぜleftとrightを0にする必要があるのか理解できません。
試しにその部分をコメントアウトして、margin: 0 auto;を書いてみましたが、中央揃えにできませんでした。

ご教授のほど、よろしくお願いいたします。