Section not showing background color - html

Question

I have tried this very same method on a previous website in which it worked. I am not sure why isn't it working now.
body {
max-width: 100%;
}
#header_encapsulator {
max-width: 1000px;
margin: auto;
background-color: orange;
}
header {
position: fixed;
max-width: 60em;
width: 100%;
}
.logo {
float: left;
font-family: 'Tangerine', cursive;
font-size: 3rem;
padding: 0 0 0 1rem;
text-decoration: none;
font-weight: bold;
color: black;
}
nav {
float: right;
padding: 1.5rem 1rem 0 0;
}
nav a {
text-decoration: none;
}
nav a:first-child {
padding-right: .8rem;
}
h1 {
font-size: 2rem;
text-align: center;
padding: 12rem 0 2rem 0;
font-family: 'Roboto Slab', serif;
}
<div id="header_encapsulator">
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
</div>
<h1>Heading</h1>
I am not sure why margin:auto inside #header_encapsulator doesn't center <header> if I don't specify a max-width. The website will break on a monitor with >1000px width. It doesn't take 10000px value not does it take % values too.
Secondly, the header_encapsulator should show a orange background image edge to edge of the display. It doesn't show. I know that empty divs/sections doesn't display it's properties, but I have done it before, the exact same way.
Edit:
I have created a simpler html and css file with the same code. You can download it here and test it locally. I don't get the orange background 100% of the monitor width.

Answer 1

Don't know if there's any reason to have the #header-encapsulator not being fixed itself instead of the header inside (which causes the encapsulator to be "empty", thus, not having a height), but simply moving the position: fixed property to #header-encapsulatorand adding a width: 100% should fix the issue
Edit: Removed 10000px max-width property from #header_encapsulator and width:100% from header.
body {
max-width: 100%;
}
#header_encapsulator {
width: 100%;
background-color: orange;
/*Put it in here*/
position: fixed;
}
header {
/*Removed it from here*/
max-width: 60em;
margin:auto
}
.logo {
float: left;
font-family: 'Tangerine', cursive;
font-size: 3rem;
padding: 0 0 0 1rem;
text-decoration: none;
font-weight: bold;
color: black;
}
nav {
float: right;
padding: 1.5rem 1rem 0 0;
}
nav a {
text-decoration: none;
}
nav a:first-child {
padding-right: .8rem;
}
h1 {
font-size: 2rem;
text-align: center;
padding: 12rem 0 2rem 0;
font-family: 'Roboto Slab', serif;
}
<div id="header_encapsulator">
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
</div>
<h1>Heading</h1>

Answer 2

You are specifying max-width: 100%.
This is the maximum width that will be taken up by the div and in order to reach this width, the div element will require enough content to fill it to 100%.
Use width instead of max-width. This will force any div to be the specified width, regardless of content.

Answer 3

Give a height to your #header_encapsulator like so:
#header_encapsulator {
width: 1000px;
background-color: orange;
height: 100px; // or anything you want
}
plus if you want margin: auto header you should do something like:
#header_encapsulator header {
margin: auto;
//other css if you want
}