Susy: Push(pre) and Pull(

Question

The following code places my sidebar-first one column off the left of the screen.

.has-sidebar-first {
.l-content {
  @include span-columns(15 omega, 16); // Span 15 out of 16 columns.
  @include push(1, 16);  // Push element by adding 1 out of 16 columns of left margin.
}
.l-region--sidebar-first {
  @include span-columns(1, 16); // Span 1 out of 16 columns.
  @include pull(1, 16); // Pull element by adding 15 out of 16 columns of negative left margin.      
}

}

The sidebar-first should take up the first column and content should take up the next 15. I have had pull set 1 through to 16 but it is either out of place or disappears entirely.

Any suggestion?

Update1: Here is the full scss layout(including the suggestion from Eric Meyer (the man himself!) places the sidebar-first further off page to the left. It appears to be offpage by the same width as the l-content .

@import "susy";

// Susy Variables

// Set consistent vertical and horizontal spacing units.
$vert-spacing-unit: 20px;
$horz-spacing-unit: 1em;

// Define Susy grid variables mobile first.
$total-columns: 4;
$column-width: 4em;
$gutter-width: $horz-spacing-unit;
$grid-padding: 5px;

$container-style: magic;
$container-width: 1200px;

// Susy Media Layouts @see http://susy.oddbird.net/guides/reference/#ref-media-layouts
$tab: 44em 12; // At 44em use 12 columns.
$desk: 70em 16; // At 70em use 16 columns.

.l-header,
.l-main,
.l-footer {
  @include container; // Define these elements as the grid containers.
  margin-bottom: $vert-spacing-unit;
}

.l-region--highlighted,
.l-region--help,
.l-region--sidebar-first,
.l-region--sidebar-second {
  margin-bottom: $vert-spacing-unit;
}

@include at-breakpoint($tab) { // At a given Susy Media Layout, use a given amount of columns.
  .l-header,
  .l-main,
  .l-footer {
    @include set-container-width; // Reset only the container width (elements have already been declared as containers).
  }

  .l-branding {
    @include span-columns(4, 12); // Span 4 out of 12 columns.
  }
  .l-region--header{
    @include span-columns(8 omega, 12); // Span the last (omega) 8 columns of 12.
  }
  .l-region--navigation {
    clear: both;
  }

  .has-sidebar-first,
  .has-sidebar-second,
  .has-two-sidebars {
    .l-content {
      @include span-columns(7, 12); // Span 7 out of 12 columns.
      @include push(1, 12);  // Push element by adding 1 out of 12 columns of left margin.
    }
    .l-region--sidebar-first, {
      @include span-columns(1, 12); // Span the 1 columns of 12.
    }
    .l-region--sidebar-second {
      @include span-columns(4 omega, 12); // Span the last (omega) 4 columns of 12.
    }
    .l-region--sidebar-first {
      @include pull(8, 12); // Pull element by adding 8 out of 12 columns of negative left margin.
    }
    .l-region--sidebar-second {
      clear: right;
    }
  }
}

@include at-breakpoint($desk) {
  .l-header,
  .l-main,
  .l-footer {
    @include set-container-width; // Reset only the container width (elements have already been declared as containers).
  }

  .l-branding {
    @include span-columns(6, 16); // Span 6 out of 16 columns.
  }
  .l-region--header{
    @include span-columns(10 omega, 16); // Span the last (omega) 10 columns of 16.
  }

  .has-sidebar-first {
    .l-content {
      @include span-columns(15 omega, 16); // Span 15 out of 16 columns.
    }
    .l-region--sidebar-first {
      @include span-columns(1, 16); // Span 1 out of 16 columns.
    }
  }
  .has-sidebar-second {
    .l-content {
      @include span-columns(12, 16); // Span 12 out of 16 columns.
    }
    .l-region--sidebar-second {
      @include span-columns(4 omega, 16); // Span the last (omega) 4 columns of 16.
      clear: none;
    }
  }

  .has-two-sidebars {
    .l-content {
      @include span-columns(10, 16); // Span 10 out of 16 columns.
      @include push(1, 16);  // Push element by adding 1 out of 16 columns of left margin.
    }
    .l-region--sidebar-first {
      @include span-columns(1, 16); // Span 1 out of 16 columns.
    }
    .l-region--sidebar-second {
      @include span-columns(5, 16); // Span 5 out of 16 columns.
    }
    .l-region--sidebar-first {
      @include pull(11, 16); // Pull element by adding 11 out of 16 columns of negative left margin.
    }
    .l-region--sidebar-second {
      @include omega; // This element spans the last (omega) column.
      clear: none;
    }
  }
}

.has-two-sidebars is working as desired. I am only hoping to fix .has-sidebar-first when @include at-breakpoint($desk) . If there is something inherently wrong with how it is set up then I will have to change the lot but I am hoping to simply change the the layout when viewed on a desktop where the is no sidebar second.

Thanks

Update 2 Following the suggestion to add margin-left: 0; here is it added.

.has-sidebar-first {
.l-content {
  @include span-columns(15 omega, 16); // Span 15 out of 16 columns.
}
.l-region--sidebar-first {
  @include span-columns(1, 16); // Span 1 out of 16 columns.
  margin-left: 0;
}

}

While this now aligns the 'side-first' to the correct column, it appears below the content, as per the picture: The rest of the code is the same. The two sidebar option still displays correctly. Any suggestions?

Solution: As per Eric's suggestion I needed to clear and previously declared push and pulls. So the correct code is:

.has-sidebar-first {
.l-content {
  @include span-columns(15 omega, 16); // Span 15 out of 16 columns.
  margin-left: 0;
}
.l-region--sidebar-first {
  @include span-columns(1, 16); // Span 1 out of 16 columns.
  margin-left: 0;
}

Thanks

Answer 1

Get rid of both the push and the pull. Neither one is needed. Your omega item is floated right, and the other item is floated left, so both will fall perfectly into place without needing any push/pull help.

update:

You have a pull set on .l-region--sidebar-first at one of the smaller breakpoints, which is still being applied at the larger breakpoint. You just need to set margin-left to 0 at the $desk breakpoint.