How to use the checkbox:checked attribute properly in CSS?

I'm having a little problem with the well known CSS checkbox trick. I am trying to make a responsive nav bar.

I have used it before, and it worked before, but now even if I copy the old code that worked before, now it just simply doesnt work.

Here is the code I have made:

<div class="responsive-nav-main-div">
    <label for="responsive-nav" class="responsive-nav-label"><img  class="hamburger" src="images/hamburger2.png" alt="Responsive-NAV"></label>
    <input type="checkbox" id="responsive-nav" class="responsive-nav">
    <div class="responsive-nav-div">
        <ul class="responsive-nav-ul">
            <li class="responsive-nav-li"><a class="responsive-nav-a" href="index.php">HOMEPAGE<a/></li>
            <li class="responsive-nav-li"><a class="responsive-nav-login-register" href="login.php">LOGIN<a/></li>
        </ul>
    </div>

And here is the CSS code:

.hamburger{
    width: 35px;
    height: 40px;
}

.responsive-nav-div{
    position: absolute;
    left: -100%;
    width: 100%;
}

.responsive-nav ~ .responsive-nav-div{
    left: 0px;
}

When I click on the checkbox or the hamburger icon (the label), it just simply doesnt apply left: 0px;. And this is so annoying, im trying to get this to work for like 3 hours now, what am I missing?

And before you ask, yes I have cleared the web browser cache just in case.

I don't really intend to use javascript for that hack that worked before, so please dont suggest javascript!

Any help related to the :checked attribute would be helpful, thanks :D!