アフィリエイト広告を利用しております。
参考サイトの記載がある場合はそちらの方がより詳しく記載説明がされているのでぜひそちらもご覧ください。
そのままコピペしても反映されないものもあります。サイトごとに変えないといけない箇所がありますので修正してください。

CSS HTML

横幅を要素の幅を超えて表示する方法(width)

要素内に横幅いっぱいに表示

要素を超えて横幅いっぱいに表示

.over-width {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

基本的にこれでいけるはずですが、できてませんね。サイドコンテンツが邪魔をしてる場合があります。
サイドコンテンツの幅が300pxなのでその半分を調整させます。

要素を超えて横幅いっぱいに表示(サイトコンテンツ調整版)

.over-width {
    margin-left: calc(50% - 50vw + 150px);
    margin-right: calc(50% - 50vw - 150px);
}

これで画面幅いっぱいに表示するようになりました。

参考サイト：https://haniwaman.com/inner-over/
【Amazon】ちゃんと知っておきたい人のHTML/CSS完全入門: HTML習得の最短講座！1日３０分で楽しく学ぼう！ Kindle版

おすすめ記事

1
クラシックエディタ用のプラグインを作ってみた
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！ この記事を書くまでは入れないか、スペースキーを押して誤 ...
2
クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました コード追加ボタンを自由に追加出来たら便利じゃない？ この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...
3
Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた
アプリ制作するに至った理由 納品代行の仕事をしていて思ったことがあります 納品代行をしていると本当に様々なお客様から様々な商品が届きます その中でも特に注意しているのが、「見た目ほぼ同じだけど違う商品 ...

-CSS, HTML
-