Improve css for features part

css/printrun.css

@@ -12,6 +12,11 @@ body {
     padding: 0;
 }
 
+.spacer {
+    clear: both;
+    width: 100%;
+}
+
 h2 {
     border-left: 5px solid #333;
     padding-left: 10px;
@@ -135,22 +140,21 @@ h2 {
 /* HOME
 -------------------------------------------------- */
 
-.container.home {
+.home {
     margin-bottom: 30px;
-    width: 960px;
 }
 
-.home .row .col-md-4, .home .row .col-md-8 {
+.homecol-4, .homecol-8 {
     width: 300px;
 }
 
-@media (max-width: 959px) {
-    .home .row {
-        margin-left: auto;
-        margin-right: auto;
-    }
+.home .homerow {
+    margin-left: auto;
+    margin-right: auto;
+}
 
-    .home .row .col-md-4, .home .row .col-md-8 {
+@media (max-width: 639px) {
+    .homerow .homecol-4, .homerow .homecol-8 {
         margin-left: auto;
         margin-right: auto;
         padding-left: 0;
@@ -158,14 +162,26 @@ h2 {
     }
 }
 
-@media (min-width: 960px) {
-    .home .row {
-        width: 960px;
+@media (min-width: 639px) and (max-width: 959px) {
+    .home .homerow {
+        width: 640px;
+    }
+
+    .homerow div:nth-last-child(2) {
+        float: none;
+        clear: both;
         margin-left: auto;
         margin-right: auto;
     }
+    
+    .homerow div:nth-last-child(2) div {
+        margin-top: 20px;
+        margin-bottom: 40px;
+    }
+}
 
-    .home .row .col-md-4, .home .row .col-md-8 {
+@media (min-width: 639px) {
+    .homerow .homecol-4, .homerow .homecol-8 {
         margin-left: 10px;
         margin-right: 10px;
         padding-left: 0;
@@ -173,13 +189,21 @@ h2 {
         float: left;
     }
 
-    .home .row .col-md-8 {
+    .homerow .homecol-8 {
         width: 620px;
     }
+}
+
+@media (min-width: 960px) {
+    .homerow {
+        width: 960px;
+    }
 
 }
 
 .homebox {
+    position: relative;
+    width: 100%;
     height: 370px;
     color: #fff;
     text-align: center;

index.html

@@ -103,11 +103,12 @@
         </div><!-- /.carousel -->
 
         <div id="features" class="separator bg-lightblue"></div>
-        <div class="container home">
+        <div class="container content">
             <h2 class="border-lightblue">Features</h2>
-
-            <div class="row">
-                <div class="col-md-8">
+        </div>
+        <div class="home">
+            <div class="homerow">
+                <div class="homecol-8">
                     <div class="homebox homebox-large">
                         <div class="front">
                             <img src="images/pronterface-pronsole-printcore.jpg" alt="Pronterface, Pronsole, Printcore" />
@@ -127,7 +128,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-md-4">
+                <div class="homecol-4">
                     <div class="homebox">
                         <div class="front">
                             <img src="images/customui.jpg" alt="Customizable UI" />
@@ -139,10 +140,7 @@
                         </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="row">
-                <div class="col-md-4">
+                <div class="homecol-4">
                     <div class="homebox">
                         <div class="front">
                             <img src="images/pronsole-screenshot.jpg" alt="CLI printing" />
@@ -153,7 +151,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-md-4">
+                <div class="homecol-4">
                     <div class="homebox">
                         <div class="front">
                             <img src="images/slic3r-integration.jpg" alt="Slic3r integration" />
@@ -164,7 +162,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-md-4">
+                <div class="homecol-4">
                     <div class="homebox">
                         <div class="front">
                             <img src="images/customcontrols.jpg" alt="Macros &amp; custom buttons" />
@@ -176,10 +174,7 @@
                         </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="row">
-                <div class="col-md-4">
+                <div class="homecol-4">
                     <div class="homebox">
                         <div class="front">
                             <img src="images/part-excluder.jpg" alt="Part excluder" />
@@ -190,7 +185,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-md-4">
+                <div class="homecol-4">
                     <div class="homebox">
                         <div class="front">
                             <img src="images/stlplater.jpg" alt="STL plater" />
@@ -201,7 +196,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-md-4">
+                <div class="homecol-4">
                     <div class="homebox">
                         <div class="front">
                             <img src="images/gcodeplater.jpg" alt="G-Code plater" />
@@ -212,9 +207,9 @@
                         </div>
                     </div>
                 </div>
+                <div class="spacer"></div>
             </div>
-
-        </div> <!-- /container -->
+        </div>
 
         <div class="main">
             <div id="download" class="separator bg-purple"></div>