問題
全体コンテンツの高さが
・ファーストビューに収まらなかった時
・収まった時
↓
横へ少しだけズレが生じる
原因
全体コンテンツの高さによって横ズレが生じる問題は、スクロールバーの有無
・スクロールバーが表示される時 → 右側にスペースが生まれ、ページの幅が縮む。
・スクロールバーが表示されない時 → 幅が変わらない。
解決策：overflow-y-scroll
「Tailwind」の「overflow-y-scroll」を「html or body」に適用すると、常にスクロールバーを表示するのでズレがなくなる。
<body class="overflow-y-scroll">
<div class="container mx-auto">
<!-- コンテンツ -->
</div>
</body>