Can't select div inside a label with input:checked

Question

I have this markup and I want to select #menu-main-menu-1 when input is :checked. But it just does not work. Where did it go wrong?

<input type="checkbox" name="name" value="" id="mobile-trigger">
    <label for="mobile-trigger">
      <i class="fa fa-bars" aria-hidden="true"></i>
      <div class="button-overlay"></div>
      <div class="menu-overlay"></div>
        <?php wp_nav_menu( $defaults ); ?>
    </label>

      input:checked + label #menu-main-menu-1 {
    top: 92px;
    pointer-events: auto;
  }

Update, my markup from source code:

<input type="checkbox" name="name" value="" id="mobile-trigger">
    <label for="mobile-trigger">
      <i class="fa fa-bars" aria-hidden="true"></i>
      <div class="button-overlay"></div>
      <div class="menu-overlay"></div>
        <ul id="menu-main-menu-1" class="navigation-small"><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-427"><a href="http://localhost:8888/category/portfolio/">Portfolio</a></li>

Blog About Contact