html - Borders With Responsive Web Design -

i'm working on creating website using responsive web design using information got w3schools.

the css pretty simple

.col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} 

each column set specific width of screen percentage.

what want have 6 "col-2" class div elements side side on page works until add border.

the div elements

<div class="col-2 greenborder">data/info goes here</div> 

the greenborder css class

.greenborder{   border-style:solid;   border-width:2px;   border-color:#16842e; } 

what have make these div elements fit while still having border?

use border-box box-sizing:

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

the reason is, default, box-model of content-box, border makes width go 2px larger. can see why here:

http://www.binvisions.com/wp-content/uploads/2011/09/css-box-model-border-content_590x328.jpg