From fb5e796f23455aac1e03ad9c281f5dc8a0148c8a Mon Sep 17 00:00:00 2001
From: Geoff Kimball <geoff@zurb.com>
Date: Fri, 4 Mar 2016 09:22:48 -0800
Subject: [PATCH] Fix incorrect calculation of grid offsets, closes #200

---
 scss/grid/_grid.scss               |  2 +-
 testing/src/pages/offset-inky.html | 37 +++++++++++++++++++-----------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index 260a9366..819f4638 100755
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -130,7 +130,7 @@ th.column {
   th.large-offset-#{$i}.first,
   th.large-offset-#{$i}.last {
     //1.5 takes in effect a whole empty cell.
-    padding-left: -zf-grid-calc-px($i, $grid-column-count, $container-width) + 1.5 * $grid-column-gutter;
+    padding-left: -zf-grid-calc-px($i, $grid-column-count, $container-width) + $grid-column-gutter * 2;
   }
 }
 
diff --git a/testing/src/pages/offset-inky.html b/testing/src/pages/offset-inky.html
index cdb40d21..9a09012c 100644
--- a/testing/src/pages/offset-inky.html
+++ b/testing/src/pages/offset-inky.html
@@ -1,28 +1,39 @@
 <container>
   <row>
-    <columns small="8" large="8">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
+    <columns>
+      <p>Offset columns should correctly align with the gutters of standard columns.</p>
     </columns>
-    <columns small="4" large="4">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
+  </row>
+  <row>
+    <columns large="1">
+      <p>1 of 12</p>
+    </columns>
+    <columns large="11">
+      <p>11 of 12</p>
     </columns>
   </row>
   <row>
-    <columns small="4" large="4" class="small-offset-8 large-offset-8">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
+    <columns large="1" class="large-offset-1">
+      <p>Offset 1 of 12</p>
+    </columns>
+    <columns large="11">
+      <p>10 of 12</p>
     </columns>
   </row>
   <row>
-    <columns small="12" large="8">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque iste voluptatibus, aspernatur error nesciunt quia molestiae tempore ab iusto voluptatum libero natus animi ipsam dolores. Modi ut, deserunt nemo.</p>
+    <columns large="2">
+      <p>2 of 12</p>
     </columns>
-    <columns small="12" large="4">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus blanditiis, iure quo mollitia molestias, officiis, quia soluta repellat voluptas ratione architecto maxime? Dolores molestias numquam, recusandae nam inventore qui autem!</p>
+    <columns large="10">
+      <p>10 of 12</p>
     </columns>
   </row>
   <row>
-    <columns small="12" large="4" class="large-offset-8">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit est asperiores id, commodi et debitis fuga sint aut in voluptatem, expedita dolor nam omnis dolorem animi. Dolores, officiis aperiam voluptate!</p>
+    <columns large="2" class="large-offset-2">
+      <p>Offset 2 of 12</p>
+    </columns>
+    <columns large="9">
+      <p>9 of 12</p>
     </columns>
   </row>
-</container>
\ No newline at end of file
+</container>
-- 
2.47.3