CSS盒模型拼图-我一定错过了什么

我已经在这里创建了流体布局的简化版本：我正在试图弄清楚为什么右边的列没有与上面的标题完全对齐。零填充。边界是一样的。我肯定错过了什么，但我一辈子都搞不清楚是什么导致了这种位移

要明确的是：我不想让三列之间的空间变得均匀。即使右栏在屏幕的右边缘像其上方的标题一样排列，它们也会被忽略

html代码如下所示：

 <div id="pagewidth">

---

问题在于页眉的边框，它增加了页眉的总宽度，但仅在右侧。您可以尝试使用

div

包装标题，并应用

框

类：（）

边框不一样。您的页眉100%宽，带有边框。其他容器位于没有边框的容器内。

框大小调整属性可以帮助您：


嗯…我在Chrome 23中没有看到问题…你能发布问题的图片或澄清问题是什么吗？这是非常微妙的。。可能是两到三个像素。看右边。标题框的右侧与右列div不完全对齐。我将发布一张图片。似乎是
标题的边框有问题。如果您删除
class=“box”
并只给它一个红色背景，它们就会排成一行。如果你给它一个5px的边框，它会增加页眉的总宽度，但只在右边。啊，我看到了。出于某种原因，我一直在考虑垂直对齐。奇怪的是box类被平等地应用于每个div和header。标题标签应该是用来替换的。非常感谢你的帮助。谢谢你，看起来很棒。但是，我还没有完全理解它。我将仔细研究它以完全理解它，但是每个header和div应用于同一个类框，它们都包含在pagewidth ID中。有什么区别？不过，我想我明白你的意思。页眉的边框应用于100%大小之外，而其他div的边框应用于100%大小之内？框大小更改框模型。通常，说
width:100%
意味着“使内容与容器元素加上边框/边距/填充物的宽度一样宽”。将其更改为
边框框
将从计算中删除边框和填充。有些人喜欢把它放在每个元素上，因为它使元素大小的计算更加自然（见：）。嘿，我得到了一些声誉，我在这方面比你投了更高的票！再次感谢！
<div class="twocols">
  <div class="box content">
  <ul>
   <li>two</li>
   <li>two</li>
   <li>two</li>
   <li>two</li>
   <li>two</li>
   <li>two</li>
  </ul>
  </div>  <!--Closes Content-->


<div class="box rightcol">
<ul>
   <li>three</li>
   <li>three</li>
   <li>three</li>
   <li>three</li>
   <li>three</li>
   <li>three</li>
 </ul>
 </div>   <!--Closes rightcol-->
 </div>   <!--Closes twocols-->

 <div class="box leftcol">
 <ul>
   <li>one</li>
   <li>one</li>
   <li>one</li>
   <li>one</li>
   <li>one</li>
   <li>one</li>
 </ul>
 </div>   <!--Closes leftcol-->

body{
    background-color:#e8f1c4;  
}

header{
    height:245px;
    width:100%;
}

#pagewidth{
    position:relative;
    margin:0 auto;
    width:95%;  
    min-width:980px;
    max-width:1450px;
}

.box{
    background:#ffffff;
    border:2px solid #bcd78d;
    border-radius:15px;
    -moz-border-radius:15px; /* Old Firefox */
    -webkit-border-radius: 15px;
    margin-top:5px;
}

.leftcol{
    width:24.5%; 
    float:left; 
    position:relative;
}

.twocols{
    width:74.5%; 
    float:right; 
    position:relative;
}

.rightcol{
    width:31.65772%; 
    float:right; 
    position:relative; 
}

.content{  
    float:left; 
    display:inline; 
    position:relative; 
    width:67%; 
}

 <div class="box">
     <header>
     </header>
 </div>

.box{
    background:#ffffff;
    border:2px solid #bcd78d;
    border-radius:15px;
    -moz-border-radius:15px; /* Old Firefox */
    -webkit-border-radius: 15px;
    margin-top:5px;
    box-sizing: border-box; /* needs prefixes for webkit/moz */
}