paddingのある親要素と同じwidth100%の要素を入れる

よくある作り

See the Pen paddingのある親要素と同じwidth100%の要素を入れる by nozomi (@key055) on CodePen.

# mainContent {
  width: 600px;
  min-height: 100vh;
  background-color: #fff;
  margin: 0 auto;
  padding: 40px;
  box-sizing: border-box;
}
.haba100 {
  background-color: #29292e;
  color: #fff;
  width: 600px;
  margin-left: -40px;
  box-sizing: border-box;
  padding: 10px 40px;
  font-size: 14px;
}

widthを親と同じにして、親のpaddingの分だけmarginでマイナスに良い。

簡単だった。
今まで頭硬かったなぁ。