How can make responsive menu using html+css with input checkbox?

Question

When the checkbox is clicked, margin:left of nav should increases and enters the screen. When clicked again, it should decrease and go out of the screen. It doesn't work like that. What's the problem with my code?

Html

<input type="checkbox" id="res-nav">
<label for="res-nav"><i class="fa fa-reorder" style="font-size:36px"></i></label>

Style

 body label {
    position: fixed;
    display: block;
    margin-left:-100px; 
    margin-top: -115px; 
    z-index:99;
}

nav{
    margin-left:-130px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

#res-nav:checked ~ nav {
    margin-left:50px;
}

Answer 1

label {
    position: fixed;
    display: block;
    margin-left:-100px; 
    margin-top: -115px; 
    z-index:99;
}

nav{
    margin-left:-9999px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    background:tomato;
    max-width:100vw;
}

#res-nav:checked ~ nav {
    margin-left:0;
}

<input type="checkbox" id="res-nav">
<label for="res-nav"><i class="fa fa-reorder" style="font-size:36px"></i>s</label>
<nav>Navbar</nav>

Answer 2

Is this what you are looking for ?

.nav{
    margin-left:-120px;
    transition: all 0.5s;
}

#res-nav:checked ~ .nav {
    margin-left: 10px;
}

<input type="checkbox" id="res-nav">
<label for="res-nav" class="nav">
	<i class="fa fa-reorder" style="font-size:36px">Hello</i>
</label>