Overriding Container Width

Before overriding anything in Asstroid scss please see Styling in Astroid Framework. You can manage widths of container by several ways in Astroid.

See also Section Container Types

Overriding default width

So, you can override any existing Bootstrap or Astroid variable by creating file TEMPLATE_ROOT/scss/custom/variable_overrides.scss

You can override $container-max-widths variable from

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

to

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px // change width as you want
) !default;

Creating custom containers

You can also create custom container of your choice. For example you want to create a custom container .my-custom-container then you can add below code in your scss . See Styling in Astroid Framework

// Grid containers
//
// Define the maximum width of `.my-custom-container` for different screen sizes.

$custom-container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

@include _assert-ascending($custom-container-max-widths, "$custom-container-max-widths");

.my-custom-container {
    @include make-container();
    @include make-container-max-widths($custom-container-max-widths);
}

Adjusting Max-Width of Container

All Bootstrap containers have max-width to control their width. You can also set the maximum width of container by just adding below css in Astroid Admin >> Custom Code >> Custom CSS and use container class in Astroid Admin >> Layout >> Edit Section >> General Settings >> Section Layout >> Select Custom >> add class into Layout Custom Class

.my-custom-container{
  max-width: 1200px;
}