開発でtailwindcssを使用、詰まったので書き残し
概要：w-screenを使用すると余白（右側）が空かないので対処する
Tailwind CSSとは
Tailwind CSSは、ユーティリティファースト（Utility-first）のCSSフレームワークで、Web開発者が迅速かつ簡単に効率的なデザインシステムを構築できるように設計されています。
ドキュメントはこちら
詰まったところ
w-screenを使用すると、画面幅に応じて自動で幅を設定してくれるとても親切なものなのですが、余白（padding）を開けようとすると、左側にしか余白ができない、、なぜだ
原因
要素の幅が画面幅に固定されてしまっているため
対処法
CSSの関数calcを使う。
対応前のコード（抜粋）
<div class="w-screen px-4 lg:w-[1000px] lg:mx-auto">
<!-- 内容 -->
</div>
対応後
<div class="w-[calc(100vw-32px)] px-4 lg:mx-auto lg:max-w-[1000px]">
<!-- 内容 -->
</div>
w-screen(100vw)で画面幅いっぱいに広げつつ、32px(16px × 2)の余白を作り出すため、calcでその分だけ引いてあげる。
ちょっとしたことだけど、大事だなーと思った、CSSって難しいですね。以上