When 25% is not 1/4 of the screen

Example 4.3 - Box Sizing - 25% is not 1/4 - Example 4.3
 
 <div class="full">
   <p>Container - 100%
   </p>
   <div class="quarter">One (25%)
   </div>
   <div class="quarter">Two (25%)
   </div>
   <div class="quarter">Three (25%)
   </div>
   <div class="quarter">Four (25%)
   </div>
 </div>

In style element (<style>) within head element: 


  div.quarter {
    width: 25%;
    border: 2px dashed purple;
    background-color: rgb(240, 200, 240);
    float: left;
    overflow: auto;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  div.full {
    width: 100%;
    border: 2px solid black;
    overflow: auto;
  }
Example 4.4 - Box Sizing - 25% is 1/4 - Example 4.4
 
 <div class="full">
   <p>Container - 100%
   </p>
   <div class="quarter">One (25%)
   </div>
   <div class="quarter">Two (25%)
   </div>
   <div class="quarter">Three (25%)
   </div>
   <div class="quarter">Four (25%)
   </div>
 </div>

In style element (<style>) within head element: 


  div.quarter {
    width: 25%;
    box-sizing: border-box;
    border: 2px dashed purple;
    background-color: rgb(240, 200, 240);
    float: left;
    overflow: auto;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  div.full {
    width: 100%;
    border: 2px solid black;
    overflow: auto;
  }