Flow items are mis-aligned to grid

[JohnAlbin]

There's an error in the calculations of the flow items when using the zen-grid-flow-item() mixin. The problem is that the parent element width is exactly 1 gutter width smaller than the width of the columns it spans. So the % width of the flow items is relative to the wrong measurement.

Spent some time trying to fix this and I believe the following replacement should work.

@mixin zen-grid-flow-item (
  $column-span,
  $parent-column-count: false,
  $alpha-gutter: false,
  $omega-gutter: true,
  $flow-direction: $zen-float-direction,
  $column-count: $zen-column-count,
  $gutter-width: $zen-gutter-width,
  $grid-width: $zen-grid-width,
  $box-sizing: $zen-box-sizing,
  $reverse-all-flows: $zen-reverse-all-floats,
  $auto-include-flow-item-base: $zen-auto-include-flow-item-base
) {

  $columns: $column-count;
  @if unit($grid-width) == "%" {
    @if $parent-column-count == false {
      @warn "For responsive layouts with a percentage-based grid width, you must set the $column-count to the number of columns that the parent element spans.";
    }
    @else {
      $columns: $parent-column-count;
    }
  }

  $dir: $flow-direction;
  @if $reverse-all-flows {
    $dir: zen-direction-flip($dir);
  }
  $rev: zen-direction-flip($dir);

  // Calculate the item's width.
  $width: zen-grid-item-width($column-span, $columns, $grid-width);
  @if $box-sizing == content-box {
    @if not comparable($width, $gutter-width) {
      $units-gutter: unit($gutter-width);
      $units-grid: unit($grid-width);
      @warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
    }
    $width: $width - $gutter-width;
  }
  width: $width;

  // Auto-apply the unit base mixin.
  @if $auto-include-flow-item-base {
    @include zen-grid-item-base($gutter-width, $box-sizing);
  }

  // Ensure the HTML item either has a full gutter or no gutter on each side.
  padding-#{$dir}: 0;
  @if $alpha-gutter {
    margin-#{$dir}: $gutter-width;
  }
  $offset: ($columns - $column-span) * $gutter-width / $columns;
  padding-#{$rev}: $offset;
  @if $omega-gutter {
    margin-#{$rev}: $gutter-width - $offset;
  }
  @else {
    margin-#{$rev}: -($offset);
  }
}