SOURCE

<div class="wrapper">
  <div class="item">
      当一个元素的宽度值为 `auto` 时，它可以有margin、padding和border，而不会变得比它的父元素大。其内content box 的宽度将是内容本身，并减去margin、padding和border。
  </div>
</div>

* {
    box-sizing: border-box;
}

.wrapper {
    max-width: 600px;
    margin: 2rem auto 0;
    padding: 1rem;
    background: #ccc;
    direction: rtl;
}

.item {
    width: 100%;
    padding: 1rem;
    margin: 0 50px;
    border: 15px solid #1f2e17;
}