You need to create the layout of your page by using containers for the basic structure. You can find these containers in /SharedResources/MiniTemplates/2022
Bootstrap containers
The main container is bootstrap-container. Bootstrap is just the name of the design system used. For example, this text is in a bootstrap container. It keeps all content limited to the central part of the page, with a white/transparent background. Most page elements, such as text, images and column layouts, should go inside a bootstrap container.
Elements which are designed to fill the page width, such as banners and quote strips, should be placed outside a bootstrap container.
You should not add a bootstrap container within another bootstrap container. For example, adding bootstrap container, then columns, and inside columns a bootstrap container again. This is unnecessary.
You can also add multiple elements/mini-templates within one bootstrap container. For example, you do not need to add a bootstrap container, add some elements in it, then exit it, add another bootstrap container, and continue adding some elements. You do not need to layer bootstrap containers this way. You can use just one bootstrap container across the page, and then exit it only when you want to add full width component beneath it, and then add another bootstrap container to continue with, if needed.
Colour options
There are a few other colour options for your containers. These are good for highlighting sections of your page or breaking up the content.
Place these coloured bootstrap containers below the white bootstrap container so that the background colour runs the full width of the page. If you place it inside the white bootstrap container instead, the coloured strip will only be as wide as the central text area.
You can add another white bootstrap container below the coloured one you've chosen if you want a white background for the sections below this.