[CSS] 親要素を無視して、子要素を画面いっぱいに広げる

containerで1024pxとかなっている時、
背景色だけいっぱいに広げたい、とか言うときに使う。

innerはcontainerと同じ幅に設定。
コンテンツの横幅は揃って、ignore~の箇所の背景色のみ画面いっぱいになる。

<div class="container">
    <div class="background-orange ignore-parent-width">
        <div class="ignore-parent-width-inner">
        </div>
    </div>
</div>

.container{
    width: 1024px;
    min-width: 1024px;
}
.background-orange{
    background-color: #FFF6F5;
}
.ignore-parent-width{
    // 親要素を無視して子要素の幅をいっぱいに広げる https://tecb.jp/blog/1517
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    .ignore-parent-width-inner{
        width: 1024px;
        min-width: 1024px;
        margin: 0 auto;
    }
}

// スマホ表示
@media (max-device-width: 480px) {
    .container{
        width: 100%;
        min-width: 100%;
    }
    .ignore-parent-width{
        // 親要素を無視して子要素の幅をいっぱいに広げる https://tecb.jp/blog/1517
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        .ignore-parent-width-inner{
            width: 100%;
            min-width: 100%;
            margin: 0 auto;
        }
    }
}