Issues with CSS checkbox checked not working in my header

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: http://ift.tt/1UVGzYa

That should when clicked show a side bar.

However, it works here when my header isn't involved in the code: http://ift.tt/1YbOq2V

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>
            <a href="#">Login</a>
        </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>
            <a href="#">Login</a>
        </li>
    </ul>
</div>
</header>

This is used for the check:

#menu_collapse_icon:checked ~ .side-navigation {
    margin-right: 0;
}