scss インナー超えボックス

Posted 2021-05-17

インナー超えボックス
----------


A [Pen](https://codepen.io/anonie/pen/zYOwZeV) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/zYOwZeV/license).

<div class="inner">
	<div class="item01">inner normal</div>
	<div class="item02">inner large</div>
</div>

html { background: #eee; }
*, *::before, *::after {
	box-sizing: border-box;
}
.inner {
	width: 900px;
	margin: 0 auto;
}
.inner { background: #fff; padding: 3rem 0; } // 視認性用

.item01 { // 視認性用
	border: 3px solid #ccc;
	margin-bottom: 3rem;
	height: 50px;
}
.item02 {
	width: 120%;
	margin-right: -10%;
	margin-left: -10%;
}
.item02 { // 視認性用
	border: 3px solid #ccc;
	height: 50px;
}