// Standard container for centered 12-column layouts. Collapses to full-width on mobile.
// Modifier classes can be applied to the required `container__block` to use different
// preset layouts. Optionally, the `container__row` class can be used to align into rows.
//
// Apply `.-padded` modifier to add extra bottom padding to a container.
//
// .-narrow - Three-quarters width container.
// .-half   - Half-width container, can be placed side-by-side to create two-column layouts.
//
// Styleguide Container

.container {
  @include clearfix;

  &.-padded {
    padding-bottom: $base-spacing * 2;
  }

  > .wrapper {
    position: relative;

    @include media($tablet) {
      @include span(12 no-gutters);
      @include push(2);
    }

    .container__block {
      // When inside a container wrapper, increase top/bottom padding
      // on the container body.
      padding: $base-spacing gutters();

      &.-narrow {
        @include media($tablet) {
          @include span(9 of 12);
        }
      }

      &.-half {
        @include media($tablet) {
          @include span(6 of 12);
        }
      }
    }
  }

  // Use container rows to separate rows in columned layouts.
  .container__row {
    @include clearfix;
  }

  // Use container body for all container content, with optional modifiers
  // to span either half or three-quarters width.
  .container__block {
    padding: gutters();
  }
}


// Standard container for centered 12-column layouts. Collapses to full-width on mobile.
// Modifier classes can be applied to the required `container__block` to use different
// preset layouts. Optionally, the `container__row` class can be used to align into rows.
//
// Apply `.-padded` modifier to add extra bottom padding to a container.
//
// .-narrow - Three-quarters width container.
// .-half   - Half-width container, can be placed side-by-side to create two-column layouts.
//
// Styleguide Container

.container {
  @include clearfix;

  &.-padded {
    padding-bottom: $base-spacing * 2;
  }

  > .wrapper {
    position: relative;

    @include media($tablet) {
      @include span(12 no-gutters);
      @include push(2);
    }

    .container__block {
      // When inside a container wrapper, increase top/bottom padding
      // on the container body.
      padding: $base-spacing gutters();

      &.-narrow {
        @include media($tablet) {
          @include span(9 of 12);
        }
      }

      &.-half {
        @include media($tablet) {
          @include span(6 of 12);
        }
      }
    }
  }

  // Use container rows to separate rows in columned layouts.
  .container__row {
    @include clearfix;
  }

  // Use container body for all container content, with optional modifiers
  // to span either half or three-quarters width.
  .container__block {
    @include clearfix;
    padding: gutters();
  }
}


Add clearfix to container block.
Add clearfix to container block.

This fixes issues with the container collapsing with floated content &
losing correct padding. References DoSomething/dosomething#3838.
