<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>
  <p>
    The width of the first one increases when the left padding is added. The width of the second one remains the same. Both their widths are set to 300px using the <code>width</code> property.  
  </p>       
  <div class="element element-1">
    I have a left padding of 50px. My width is set to 300px. My total width is: 350px.
  </div>
  <div class="element boxSizing">
    I have a left 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 the padding is set.
  </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: #0099cc;
  color: white;
  margin-bottom: 30px;
  height: 300px;
  width: 300px;
}

.element-1 {
  padding-left: 50px;
}

.boxSizing {
  box-sizing: border-box;
  padding-left: 50px;
}