html - Box-sizing property not working as expected with Bootstrap columns -

i'm using twitter's bootstrap lay out responsive site. have 2 columns side-by-side inside .container div. add border each side of container. when so, second column pushed underneath first.

.row {     border-left: 1px solid red;     border-right: 1px solid red; } 

i thought correct css box-sizing property incorporate div's border width. it's not working, however.

* {     -moz-box-sizing: border-box;     -webkit-box-sizing: border-box;     box-sizing: border-box; } 

any ideas why? how can add border on each side without hacking bootstrap's files?

code: http://jsfiddle.net/huv7a/13/

edit: i'm trying achieve borders on outside of columns: http://jsfiddle.net/huv7a/12/

if can live row-fluid, here's 1 clean solution: http://jsfiddle.net/panchroma/s7ple/

css

.row-fluid{ border-left:1px solid red; border-right:1px solid red; -webkit-box-sizing: border-box; /* safari/chrome, other webkit */ -moz-box-sizing: border-box;    /* firefox, other gecko */ box-sizing: border-box;         /* opera/ie 8+ */ }