checkbox to trigger a hidden div, from another div

Ladies and gentlemen. I am paying around with this lovely css only slide down full screen navigation menu. Everything is peaches, that is until I try to move the checkbox that triggers the menu.

You see the checkbox works when it is dumped straight in the body of the page. But as soon as I put it inside a div, it does not.

Fiddle with my fiddle. See how it's not working, but if you move the checkbox out of "im-my-own-div" it works!

I believe this is the code responsible for hiding and showing the nav tag.

<input type="checkbox" id="nav">
<label for="nav" class="entypo-menu"></label>

and

input[id*="nav"]:checked ~ nav {
  transform: translate3d(0,0,0);
}

Upon further inspection it only seems to work when placed directly above the nav class. Is there a way for it to reach the nav div even if the checkbox is located inside another div elsewhere on the page.