Css 为什么3 x 33%宽度的列不适合100%容器

这个问题已经让我厌烦了一段时间了。请有人帮我解决这个代码之谜，而不改变列宽，使其完全等于100%

<style>
/* slider style rules */
  * {
     padding: 0; margin: 0;  
    }
  .slider ul {
     list-style: none; 
   }
 .slider ul li {
    display: inline-block;
    width: 33%; 
        /* ^= set this to 32% and watch the horizontal adjustment
        of the items if your   confused   */
    }
   </style>

   <div class="slider">
      <h2>Why do 3 x 33% width columns not fit in a 100% container?</h2>
        <span>Shouldn't there be an <em>EXTRA</em>1%? if each column is 33% x 3 columns = 99%    why with every single elements padding and margin reset do the elements not fit in the page</span>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
   </ul>
 </div>

/*滑块样式规则*/
* {
填充：0；边距：0；
}
.ul{
列表样式：无；
}
李先生{
显示：内联块；
宽度：33%；
/*^=将其设置为32%，并观察水平调整
如果您对这些项目感到困惑*/
}
为什么3 x 33%宽度的列不适合100%容器？
难道不应该有额外的1%吗？如果每列为33%x 3列=99%，为什么每个元素都有填充和边距重置，元素不适合页面

项目
项目
项目

---

以下是一个工作片段：

/*滑块样式规则*/
* {
填充：0；
保证金：0；
}
.ul{
列表样式：无；
}
李先生{
显示：内联块；
边框：1px纯红；/*演示用途*/
框大小：边框框；/*演示用途*/
宽度：33%；/*不知道为什么，可能与块级项目有关。要使其工作，只需向左浮动。我使用27英寸监视器，一切正常。但当我将其移动到15.4英寸时监视器它不适合。有趣的是，在这里找到。显然内联块项目考虑了空白。奇怪。这是长方体模型。宽度计算为内容的宽度，不包括填充、边框和边距。@agconti他没有填充边距或边框，这是内联块元素之间的空白。