親のpaddingやmax-widthに制限されず、片側だけ画面端まで背景や装飾を広げたい時に使えるテクニックです。主にカードやセクションの背景装飾などで活躍します。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
鍵は margin-right: calc(50% - 50vw) の1行です。50% は「親要素の幅の半分」、50vw は「画面幅の半分」なので、その差し引きぶんだけネガティブマージンが生まれ、要素が親のコンテナを突き破って画面端まで届きます。コンテナのmax-widthを変えても自動で追従するため、マジックナンバーが不要です。
左右どちらでも応用可能。margin-left: calc(50% - 50vw); で左側だけ広げることもできます。縦スクロールバーの幅ぶん横スクロールが出る場合は、bodyにoverflow-x: clipを検討してください。
中央寄せのコンテナ内で、特定のセクションだけ右側を画面端まで広げるフルブリードレイアウトを作ってください。margin-right: calc(50% - 50vw)を使い、コンテナ幅に依存しない作りにしてください。