box-sizing: border-box

Внешний блок с заданной шириной для внутреннего играет роль box-sizing: border-box

by akogch

HTML

<div class="wrap">
  <div>
    Ширина слоя 100%
  </div>
</div>

<div class="con"></div>

SCSS

.wrap {
	width: 50%;
	background-color: rgba(0, 0, 0, 1);
	margin: 100px auto 0 auto;
	div {
		background: rgba(255, 255, 0, .5);
		/* margin: 50px; */
		padding: 25px;
		border: 1px solid #000;
		text-align: center;
	}
}
.con {
	width: 50%;
	background-color: #f00;
	/* margin: 10px; */
	padding: 20px;
	border: 1px solid #000;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}