The loading container fills the sides with colors.

Question

I have the following template using bootstrap:

I am using a 1200px container for a blue / gray container and the image is 1600 pixels.

I would like to fill the left side of the blue container (400 pixels) with blue and the right side of the gray container (800 pixels) with gray, but the fillers cannot pass more than 1600 pixels. Basically this should match the image above the two containers.

Here is what I would like to achieve:

the content should remain within 1200 pixels, but the background colors should be filled up to 1600 pixels.

If I resize the template to 1200 pixels, it should look like this.

, ? , , , , , , .

!

: : http://www.bootply.com/APwOkhCfQD

Answer 1

, 1600px width. :

container , :

<div class="container-fluid">
    <div class="container"><!-- delete this -->

container 1600:

.container {
    width: 1600px;
}

http://www.bootply.com/q35ERYfN7A

Update:

:

.blue-background, .light-gray-background{height: 100vh;}
body{background: linear-gradient(90deg, #004a87 50%, #f2f1eb 50%);}

Answer 2

.service- .commitment. 200px 100%. !

:

.service-container::before {
  content: "";
  background-color: blue;
  width: 200px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

Answer 3

.

container - .

.light-gray-background:before {
    right: -999em;
    background: #f2f1eb;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

: http://www.codeply.com/go/Cdnjz5CH5M