Full browser width bar using negative margins - css

Question

I'm trying to follow this tutorial:
https://css-tricks.com/full-browser-width-bars/#article-header-id-0
What I need, is my <header> element to be a max-width of 800px, centered in the middle of the page. Then inside that header bar, I will be having a #filtersBar div that will go across the whole body of the page (edge to edge). This is what my code comes out with so far:
Here is a fiddle:
https://jsfiddle.net/us2jsmLy/3/
html, body {
overflow-x: hidden;
}
header {
position: relative;
width: 100%;
margin: 0 auto;
max-width: 1200px;
z-index: 250;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
background:red;
justify-content: space-between;
}
#filtersBar {
position: relative;
background: green;
width: 100%;
max-width: 800px;
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
z-index: 1;
}
#filtersBarInner {
position: relative;
width: 100%;
max-width: 800px;
background-color: blue;
z-index: 2;
}
<header>
foo bar some contents
<div id="filtersBar">
<div id="filtersBarInner">
dddd
</div>
</div>
</header>
I must be missing something stupid :/

Answer 1

As I understand, you can use :before pseudo for the full background edge to edge and also apply margin:0 to body
Updated Fiddle
html,
body {
overflow-x: hidden;
margin: 0;
}
div#filtersBar:before {
content: "";
position: absolute;
background: green;
top: 0;
bottom: 0;
left: -1000px;
right: -1000px;
z-index: -1;
}
header {
position: relative;
width: 100%;
margin: 0 auto;
max-width: 800px;
z-index: 250;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
background: red;
justify-content: space-between;
}
#filtersBar {
position: relative;
background: green;
width: 100%;
max-width: 800px;
z-index: 1;
padding: 15px 0;
}
#filtersBarInner {
position: relative;
width: 100%;
max-width: 800px;
/*margin: 0 auto;*/
background-color: blue;
z-index: 2;
}
<header>
foo bar some contents
<div id="filtersBar">
<div id="filtersBarInner">
<p>
ddddd
</p>
<p>
ddddd
</p>
<p>
ddddd
</p>
<p>
ddddd
</p>
</div>
</div>
</header>