CSS Box Model Puzzle - I must be missing something

Question

I have created a simplified version of my fluid layout here: http://jsfiddle.net/persianturtle/8UZjz/5/ and I am trying to figure out why the right column does not line up exactly with the header above it. There is zero padding. The borders are the same. I must be missing something but I can't for the life of me figure out what is causing the displacement.

To be clear: I am not looking to make the space between the three columns even. They would be even if the right column would line up at the right edge of the screen like the header above it.

The html code is as follows:

 <div id="pagewidth">

<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-->

​

And the CSS:

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%; 
}

Answer 1

The borders aren't the same. Your header is 100% wide with borders. The other containers are within a container that isn't bordered. The box-sizing property can help you out here:

http://jsfiddle.net/8UZjz/12/

.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 */
}

Answer 2

The problem lies with the border of the header, it increases the overall width of the header, but only on the right side. You could try wrapping the header with a div and apply the box class: (jsfiddle)

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