<div class="container">     
  <p>Both of the following containers have the same width set using the <code>width</code> property. The first one has the default box-sizing value, and the second one has the box-sizing set to border-box.</p>
  <div class="element element-1">
    I have a horizontal padding of 60px. My width is set to 300px. My total width is 360px.
  </div>

  <div class="element boxSizing">
    I have a padding, and my <code>box-sizing</code> property has been set to <code>border-box</code>. My width is set to 400px. My total width remains 300px no matter how much horizontal padding is added.
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  background-color: #009966;
  color: white;
  margin-bottom: 30px;
  padding: 20px 30px;
  /* horizontal padding is: 30px + 30px = 60px; */

  width: 300px;
}

.boxSizing {
  box-sizing: border-box;
}