親要素から子要素をはみ出して画面幅いっぱいにする方法

下の画像の【A】を親要素からはみ出して横幅を画面幅いっぱいにしたい、というときには、以下CSSを適用します。

<div class="c-box--1">
  <div class="c-box--1__child">はみ出したい子要素</div>
</div>

<style>
.c-box--1{
　width:800px;
}
.c-box--1__child{
　width: 100vw;
　position: relative;
　left: 50%;
　transform: translateX(-50%);
}
</style>

ただし、800px以下も表示を切り替えずそのままにすると、ブラウザを800px以下にしたときに下画像のようになってしまいます。

その場合、メディアクエリで800px以下の場合にはleftとtransformは打ち消す必要があります。