responsive columns not working? - html

Question

Having trouble with my responsive layout. My twelve columns blocks are not on one row the last two float under it but should be all in one line.
Each row will be having its own column blocks.
You can get full code view of what I mean at my codepen snippet.
http://codepen.io/riwakawebsitedesigns/pen/zbmLE
.container {
display: block;
width: 94%;
max-width: 1280px;
margin: 2% auto 0 auto;
}
.row {
display: block;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
background: #e5e5e5;
min-height: 40px;
text-align: center;
float: left;
margin-right: 20px;
}
.block-1 {
width: 8.33333333%;
}
.block-2 {
width: 16.66666667%;
}
.block-3 {
width: 25%;
}
.block-4 {
width: 33.33333333%;
}
.block-5 {
width: 41.66666667%;
}
.block-6 {
width: 50%;
}
.block-7 {
width: 58.33333333%;
}
.block-8 {
width: 66.66666667%;
}
.block-9 {
width: 75%;
}
.block-10 {
width: 83.33333333%;
}
.block-11 {
width: 91.66666667%;
}
.block-12 {
width: 100%;
}
.last, .omega, .end{
margin: 0;
}

Answer 1

Remove the margin on the columns:
.column {
background: #e5e5e5;
min-height: 40px;
text-align: center;
float: left;
margin-right: 20px; <!-- remove -->
}
Instead of the reaching 100% width the margin is causing less width for them due to the 20px x 12. So your getting 100% + 240px, this is causing the last 2 to move below.
DEMO HERE

Answer 2

Ruddy is right, you are not considering the gutter between columns. Do his way or...
SIMPLE SOLUTION:
Try to subtract 2% from each block class, worked here.
FANCY SOLUTION:
If you use LESS you can work with variables, so you could do something like this:
/*LESS FILE*/
#gutter: "20px";
.block1 {
width: (8.333% - #gutter);
}
Hope it helps.