/// A placeholder that will automatically center a block element horizontally
///
/// @access public
/// @group responsive

%margin-center {
    margin: {
        left: auto;
        right: auto;
    }
}

/// The width of the website at all of the given breakpoints
///
/// @access public
/// @group responsive

%container {
    @extend %margin-center;

    // An amount of pixels removed from the container width in order to make up for the
    // horizontal space added by scrollbars
    $_correction: 30px;

    width: 100%;

    @each $bp in map-slice(map_keys($breakpoints), 2) {
        @include respond-up($bp) {
            width: map-get($breakpoints, $bp) - $_correction;
        }
    }
}

/// The width of the website at all of the given breakpoints
///
/// @access public
/// @group responsive

%container {
    // An amount of pixels removed from the container width in order to make up for the
    // horizontal space added by scrollbars
    $_correction: 30px;

    margin: {
        left: auto;
        right: auto;
    }
    padding: {
        left: 15px;
        right: 15px;
    }
    width: 100%;

    @each $bp in map-slice(map_keys($breakpoints), 2) {
        @include respond-up($bp) {
            padding: {
                left: 0;
                right: 0;
            }
            width: map-get($breakpoints, $bp) - $_correction;
        }
    }
}

Fix container padding at smallest breakpoint
Fix container padding at smallest breakpoint

