I've been following a tutorial and need help with my header element. I want it to have a max-width of 800px and be centered in the middle of the page. Inside the header, there will be a #filtersBar div that spans the entire width of the page. Here's what I have so far:
https://i.sstatic.net/veFa1.jpg
Check out my code on this 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 feel like I'm overlooking something simple :/