How to make a container in a container or such an indent in bootstrap?

Question

Layout

I look at the layout, and for some reason there are not 12, but 14 columns. Screenshot here: prntscr.com/kyxrbf. The site itself has a boxed look, i.e. not full width, but lies in the container. I highlighted it in red on the screenshot. Further, on both sides, in yellow, I highlighted the very indents that I don’t know how to implement. They are equal to the width of one column, but together with them it turns out not 12, but 14 columns. So these are not columns, but only indents equal to the columns. Here is how to make such an indent? A container within a container refuses to work, and some margin or padding is not sure it will be the same size as 1 column width. How are such indents generally made and did the designer do the right thing?

Answer 1

The simplest thing to do is to make 14 columns and follow the layout, rather than invent different paddings.

Answer 2

Dude, I had a similar situation.
I didn’t understand for a long time, I made a container in a container. The first container was the fluid with the background, and the second container was the content. The number of columns is also not a problem, I often receive orders with 16-18-20 columns.
The bootstrap site has a compiler, where you can drive in the number of columns and save the recompiled bootstrap

Answer 3

Look in the wrong direction, most likely.
Firstly, these indents are relevant only on large screens
. Secondly, it is hardly important that they are equal to the width of the column.
Just make your custom container with fixed paddings, 70-80px.

.my-container {
  max-width: 1300px;
  margin: auto;

  @include media-breakpoint-up(xl){
    padding: 0 80px;
  }
}