Full with background with fixed with content - html

Question

I've got the following two containers that should be 1400px width in total. The problem in my code is that the background isn't 100% width when I want the two containers to be 1400px.
How can I achieve this the best way? I hope you guys get my problem.
I am using the following code:
.wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 50px;
}
#left-container {
width: 50%;
background: blue;
float: left;
}
#right-container {
width: 50%;
background: green;
float: left;
}
<div class="wrapper">
<div id="left-container">
<h2>Left container</h2>
</div>
<div id="right-container">
<h2>Right container</h2>
</div>
</div>

Answer 1

You can use pseudo element in addition to background for the coloration and you can have some overflow:
.wrapper {
max-width: 1400px;
margin: 0 auto;
padding:0 50px;
}
#left-container {
width: 50%;
background: blue;
float: left;
position:relative;
}
#left-container:before {
content:"";
position:absolute;
left:-100vw;
right:100%;
top:0;
bottom:0;
background:inherit;
}
#right-container {
width: 50%;
background: green;
float: left;
position:relative;
}
#right-container:before {
content:"";
position:absolute;
right:-100vw;
left:100%;
top:0;
bottom:0;
background:inherit;
}
body {
overflow:hidden;
}
<div class="wrapper">
<div id="left-container">
<h2>Left container</h2>
</div>
<div id="right-container">
<h2>Right container</h2>
</div>
</div>

Answer 2

It can be done in many ways. The most simple solution I can think of now is to add a container and use a linear gradient:
body {margin:0; padding:0;}
.container {
background: linear-gradient(to left, blue 50%, green 50%);
}
.wrapper {
border: 1px solid white;
max-width: 1400px;
margin: 0 auto;
overflow: auto;
}
#left-container,
#right-container{
box-sizing: border-box;
width: 50%;
float: left;
padding-left: 50px;
}
<div class="container">
<div class="wrapper">
<div id="left-container">
<h2>Left container</h2>
</div>
<div id="right-container">
<h2>Right container</h2>
</div>
</div>
</div>