I made a checkbox to open the menu when resizing it but it is not working?

Hello,
I have created this HTML code for navigaton:

			<input type="checkbox" id="nav-toggle" class="nav-toggle">
				
		
			
<nav>
		
	<ul>
		<li> <a href="#"> Home</a>  </li>
		<li> <a href="#"> Ondehoud</a>  </li>
		<li> <a href="#"> Banden</a>  </li>
		<li> <a href="#"> APK</a>  </li>
		<li> <a href="#"> Cotact</a>  </li>
		
	</ul>
	
		</nav><!-- #site-navigation -->	
			<label for="nav-toggle" class="nav-toggle-label">  
			<span>     X            </span>     
			
			</label>

and this is css code:

nav {
	position:absolute;
	text-align:right;
	right:0;
	width:100%;
	transform:scale(1,1);
	transition:transform 400ms ease-in-out;
	transform-origin:top;
  background:green;
	
}

nav ul{
	
	list-style:none;
	;
}
nav li{
	display:inline-block;
	padding-left:1em;
}

nav a{
	color:red;
	text-decoration:none;
	font-size:1.2em;
	text-transform:uppercase;	
	position:relative;
	transition:opacity 150ms ease-in-out;

}
nav  a:before{
content:"";
display:block;
background:black;
height:3px;
bottom:-0.75em;
position:absolute;
transform-origin:left;
left:0;
right:0;
 transform:scale(0,1);
transition:transform ease-in-out 250ms;
	
}

nav a:hover::before {
transform:scale(1,1);

}

.nav-toggle {
display:none;	
	
}
.nav-toggle:checked ~nav {
	display:block;
	transform:scale(1,1);
	
	
}

.nav-toggle:checked ~ nav a {
	
	
}
.nav-toggle-label {
position: absolute;
top:0;
left:0;
margin-left: 1em;

height:100%;
display:flex;
align-items:center;
	
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after
 {
display:block;
background:black;
height:2px;
width:2em;
border-radius:5px;
position:relative;
	
	
}
.nav-toggle-label span::before,
.nav-toggle-label span::after 
{
	
content:" ";
position:absolute;

}

.nav-toggle-label span::before {
bottom:7px;	
	
}
.nav-toggle-label span::after {
top:7px;	
	
}
@media only screen
and (min-width : 600px) {
	.nav-toggle-label {
		display:none;
	}
}

it has when I check the checkbox to open the navigation menu but t is not happening.
this is the html code :

<input type="checkbox" id="nav-toggle" class="nav-toggle">

and this is the css code:

.nav-toggle:checked ~nav {
	display:block;
	transform:scale(1,1);
	
	
}

this is my url :https://webdesignleren.com/
you have to resize the website to see the checkbox or the haburger menu.
wat it can be the fault herre thatthe ceckbox is not opening the menu?
thanks