hamburger menu behind a checkbox on mobiles but it does not work

I have a simple hamburger menu with a checkbox, for my navigation. However in the mobiles I am faced with the hamburger and the checkbox, it is not going behind the hamburger. I am not an expert with CSS but I have tried to get it to work to no avail.

#page-nav {width: 100%;}
#page-nav label, #hamburger {display: none;}
#page-nav ul {font-family: 'Monserrat' sans-serif; font-size: 18px; color: white; list-style-type: none; margin: 0; padding: 0;}
#page-nav ul li {text-align: center; display: inline-block; padding: 10px; width: 11.11%; box-sizing: border-box;}
#page-nav ul li a {color: #fff; text-decoration: none;}a {text-decoration: none; color: #232323; transition: color 0.3s ease;}
li:visited {background: #0000EE; color: #fff;}
li:active, .active {background: #0000EE; color: #fff;}
li:hover {background: #0000EE; color: #fff;}

  /* Show Hamburger */
@media screen and (max-width: 768px){
#page-nav {background-color: #3333FF;}
#page-nav label {display: inline-block; color: #fff; background: #3333FF; font-style: normal; font-size: 2em; padding-bottom: 8px; padding-right:-50px; z-index: 3; transition: color 0.3s ease;}
#page-nav ul {display: none;}
#page-nav ul li {width: 22.22%; display: block; border-top: 1px solid #333;}
#page-nav input[type=checkbox]checked ~ ul{display: block; }
#page-nav ul li:active {display: inline;}```

html ```<nav id="page-nav"><label for="#hamburger">&#9776;</label><input type="checkbox">
<ul>
<li><a href="http:/index.html">Home</a></li>
<li><a href="http:/contacts.html">Contacts</a></li>
<li class="active"><a href="http://news.html">News</a></li>
<li><a href="http://members.html">Members</a></li>
<li><a href="http://policies.html">Policies</a></li>
<li><a href="http://www.hubb.org.uk/volunteer.html">Volunteer</a></li><li><a href="http://links.html">Links</a></li></ul></nav>