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

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

表示結果

See the Pen rNWqagE by 山崎毅 (@nbudjgzu) on CodePen.

HTML

<div class="box">
  <div class="btnArea">
     <div class="btn"><a href="#">click here</a></div>
   </div>
</div>

CSS

.box {
  padding: 20px;
}
.btnArea {
  background: #f2f2f2;
  /*画面いっぱい*/
  margin: 0 calc(50% - 50vw);
  width:100vw;
}