I am trying to fit four columns inside a container whose width is 940px <http://jsfiddle.net/thiswolf/D3Z6g/> but the columns do not exactly fit.Each column has 220px and a right margin of 20px,so ideally they should fit well if i remove the right margin for the last column but even after that,they wont fit.The last column is shorter by 12px.

My browser is firefox 12

here is the html

```
<!Doctype html>
<head>
<meta charset="uft-8">
<title>Four Columns Portfolio</title>
<style type="text/css">

.container{
width:940px;
border:1px dotted red;
height:auto;
}
li.portfolio{
display:inline-block;
width:220px;
height:180px;
background-color:orange;
margin-right:20px;
margin-bottom:10px;
}
li.every-forth{
background-color:orange;
width:208px !important;
margin-right:0;
}
.portfolio-div{
display:block;
margin-left:-40px;
}
</style>
</head>
<body>
   <div class="container">
   <div class="portfolio-div">
         <ul>
         <li class="portfolio">
         <p>Column 1</p>
         </li>
         <li class="portfolio">
         <p>Column 2</p>
         </li>
         <li class="portfolio">
         <p>Column 3</p>
         </li>
         <li class="every-forth portfolio">
         <p>Column 4</p>
         </li>
         </ul>  
    </div>
   </div>
</body>
</html>

```