要素内に横幅いっぱいに表示
要素を超えて横幅いっぱいに表示
.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://hbb.afl.rakuten.co.jp/hgb/0fb3a2a7.a3eac612.0fb3a2a8.1146eb94/?me_id=1213310&item_id=21161259&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F8469%2F9784815618469_1_5.jpg%3F_ex%3D400x400&s=400x400&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
