.as-calendar-header {
  @extend %grid-row;

  background-color: color(border, light);
  border-bottom: 1px solid color(border, dark);

  nav,
  h1 {
    line-height: rem(80);
  }

  h1 {
    @extend %grid-column-6;
  }

  nav {
    @extend %grid-column-6;

    text-align: right;

    > ul {
      @extend %button-group;

      > li {
        padding: $column-gutter / 4 0;
      }
    }

    .previous-week {
      @include button-icon('caret-left');
    }

    .current-week {
      &:disabled {
        color: color(border);
      }
    }

    .next-week {
      @include button-icon('caret-right');
    }
  }
}

.as-calendar-header {
  @extend %grid-row-gutter;

  background-color: color(border, light);
  border-bottom: 1px solid color(border, dark);

  nav,
  h1 {
    line-height: rem(80);
  }

  h1 {
    @extend %grid-column-6;
  }

  nav {
    @extend %grid-column-6;

    text-align: right;

    > ul {
      @extend %button-group;
    }

    .previous-week {
      @include button-icon('caret-left');
    }

    .current-week {
      &:disabled {
        color: color(border);
      }
    }

    .next-week {
      @include button-icon('caret-right');
    }
  }
}

Use grid-row-gutter to space header and remove unnecessary padding
Use grid-row-gutter to space header and remove unnecessary padding
