How to use border with Bootstrap

Question

How can I solve this problem? When you add borders to a div, the div is not centered and the span12 class is not centered.

I would like to center the div with the borders

<div class="row" >    <div class="span12" style="border: 2px solid black">       <div class="row">          <div class="span4">             1          </div>          <div class="span4">             2          </div>          <div class="span4">             3          </div>       </div>    </div> </div> 

Answer 1

Unfortunately, that's what borders do, they're counted as part of the space an element takes up. Allow me to introduce border's less commonly known cousin: outline. It is virtually identical to border. Only difference is that it behaves more like box-shadow in that it doesn't take up space in your layout and it has to be on all 4 sides of the element.

http://codepen.io/cimmanon/pen/wyktr

.foo {     outline: 1px solid orange; }