bodyにoverflow-x: hiddenをかけるとPC表示ではうまくいくのに、スマホ表示では横スクロールが発生しました。

原因

bodyにoverflow-x: hidden が効かないのはCSSがそういう使用だからだそうです。

対処法

body直下に全体を囲むdivを用意して、それにover-flow: hidden をかければOKです。