CSSで出来る！子要素の幅を親要素からはみ出して画面いっぱいにする

<div class="container">
  <div class="box">子要素画面いっぱい</div>
</div>

.container{
   max-width:500px;
   margin:0 auto;
   background-color:#fff8a2;
}
.box{
   	margin: 0 calc(50% - 50vw);
    width: 100vw;
    padding:20px 0;
    background-color:#66cdaa;
}