CSS calc()

CSS calc() function give a way to calculate values. See: calc() function on MDN

width: calc(33.33% - 2rem);

Example 4.10 - box sizing - Example 4.10
 
 <ul>
   <li>Item One
   </li>
   <li>Item Two
   </li>
   <li>Item Three
   </li> </ul>

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


  ul, li { margin-left: 0; padding-left: 0;}
  ul { list-style: none; overflow: auto; background-color: #ffffdd; border: thin solid black;}
  li { box-sizing: border-box;
    padding: 1rem; margin: 1rem; float: left;
    width: calc(33.33% - 2rem);
    font-weight: bold; text-align: center; border: 5px dotted green; }