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.

Also see: 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;
}