【CSS】画面幅いっぱいに要素を広げる・片方だけを広げるバリエーション

完成イメージ

幅を広げるには色んなパターンがありますが、実際に見てもらうのが早いと思います、下の具体例をご覧ください。
※レスポンシブの設定はしていないのでPCでの閲覧推奨です。

See the Pen 100vw container by netamame (@netamame) on CodePen.

実装方法

CSSの /* POINT! */ と書いた部分を使用して、ウィンドウサイズ幅いっぱい(画面幅いっぱい)に要素を広げています。

親要素(ここでは.wrapper)に overflow: hidden; を当てる理由

width: 100vw はスクロールバーの幅を含むため、overflow: hidden; がないと水平スクロールが生まれてしまいます。上のCodePenで試してみて下さい。

<div class="wrapper">
	<div class="container">
        <div class="fit">ここはコンテナー内に収まります</div>
        <div class="wide-full">ここは画面幅いっぱいに広がります</div>
        <div class="wide-fit">背景は画面幅いっぱい・コンテンツはコンテナ幅</div>
        <div class="wide-right">ここは右側だけ広がります</div>
        <div class="wide-left">ここは左側だけ広がります</div>
	</div>
</div>

.wrapper{
	overflow: hidden;/* POINT! */
}

.container{
    background: lightgray;/* ライトグレー */
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    padding: 20px 60px;
}

/* コンテナ内に収めます */
.fit {
	background: darkgray;/* ダークグレー */
	padding: 20px;
}

/* 画面幅いっぱいに広げます */
.wide-full {
    background: lightcoral;/* レッド */
    margin-top: 20px;
    padding: 20px;
    margin-inline: calc(50% - 50vw);/* POINT! */
    width: 100vw;/* POINT! */
}

/* 背景は画面幅いっぱい・コンテンツはコンテナ幅 */
.wide-fit {
    background: lightsalmon;/* オレンジ */
    margin-top: 20px;
    padding: 20px calc(50vw - 50% + 10px);/* POINT! */
    margin-inline: calc(50% - 50vw);/* POINT! */
}

/* 右側だけ広げます */
.wide-right {
    background: cornflowerblue;/* ブルー */
    margin-top: 20px;
    padding: 20px;
    margin-right: calc(50% - 50vw);/* POINT! */
}

/* 左側だけ広げます */
.wide-left {
    background: lightseagreen;/* グリーン */
    margin-top: 20px;
    padding: 20px;
    margin-left: calc(50% - 50vw);/* POINT! */
}