Issues with CSS checkbox checked not working in my header - html

Question

I have a checkbox and label in my header im using for a side menu.
However, its not working and the selector of being checked isn't working.
See here: https://jsfiddle.net/jpjL3hhp/
That should when clicked show a side bar.
However, it works here when my header isn't involved in the code: https://jsfiddle.net/jpjL3hhp/1/
What is causing the problem?
Working code:
<input type="checkbox" id="menu_collapse_icon">
<label for="menu_collapse_icon" class="menu_collapse_icon_label">Show Menu</label>
<div class="side-navigation">
<ul>
<li>
Login
</li>
</ul>
</div>
Not working:
<header>
<input type="checkbox" id="menu_collapse_icon">
<label for="menu_collapse_icon" class="menu_collapse_icon_label">Show Menu</label>
<div class="side-navigation">
<ul>
<li>
Login
</li>
</ul>
</div>
</header>
This is used for the check:
#menu_collapse_icon:checked ~ .side-navigation {
margin-right: 0;
}

Answer 1

The problem is your HTML structure.
You are using #menu_collapse_icon:checked ~ .side-navigation as the selector.
In the non-working example where you integrated with all the header it doesn't work because your .side-navigation isn't being selected since its not in the same level as #menu_collapse_icon.
So if you place the .side-navigation in the same level as #menu_collapse_icon it will work.
Like this:
.side-navigation {
right: 0;
height: 100%;
background-color: white;
width: 200px;
margin-top: 106px;
margin-right: -200px;
transition: margin-right 0.5s ease;
position: fixed;
}
#menu_collapse_icon:checked ~ .side-navigation {
margin-right: 0;
}
header {
position: fixed;
height: 100px;
background-color: blue;
width: 100%;
}
header nav ul li {
float: left;
}
<header>
<div class="max-container">
<input type="checkbox" id="menu_collapse_icon">
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
Show Menu
</label>
<div class="side-navigation">
<ul>
<li> Login
</li>
<li> Jobs
</li>
<li> Employers
</li>
</ul>
</div>
</div>
</header>