WordPress Theme Issue

First of all, I am running a wordpress website named TutsPie.com. I have developed my own wordpress theme from scratch. Actually, i am a noob, therefore, there may be a lot of errors in my theme.

Problem Point

Coming to the point, the problem i encountered is about my theme header menu. When i run my website on mobile, the menu is collapsed in a hamburger form on right side. But when i click the button to dropdown the menu, it drop downs, but do not disappear after clicking away on any place.

The menu just remain open in drop down form. Look at the screen shot below to understand it clearly.

wp_nav_menu()

wp_nav_menu() function is used to create the menu. so here is that code.

<section class="primary-menu" id="primaryMenu">
        <label for="toggle-1" class="toggle-menu"><ul><li></li> <li></li> <li></li></ul></label>
        <input type="checkbox" id="toggle-1">               
            <nav>
            <?php
                 wp_nav_menu( 
                     array(
                         'menu'              => 'primary-menu', //Desired menu id, name or object
                         'theme_location'    => 'primary_menu', //Theme location
                         'menu_id'           => 'primaryMenu', //The id for ul, default is the menu slug, incremented
                         'fallback_cb'       => 'false', //A callback function, default 'wp_page_menu'
                     ) 
                );
                ?>
            </nav>
    </section>

CSS Stylesheet

Below is the CSS stylesheet of the menu:

.primary-menu{
    background: #f8f9fa;
    z-index: 1000;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    margin-left: -40px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    height: 40px; 
}
.primary-menu nav{
    width:auto;
    float:left;
    margin-top: -15px;
    text-transform: uppercase;
}
.primary-menu nav ul{
    display:table;
    float:right;
    list-style-type: none;
}
.primary-menu nav ul li{
    float:left;
}
.primary-menu nav ul li:last-child{
    padding-right:0px;
}
.primary-menu nav ul li a{
    color:#000; 
    font-size:15px; 
    padding: 7px 30px; 
    display:inline-block; 
}
.primary-menu nav ul li a:hover,
.primary-menu .menu .current_page_item{
    background-color:#fff; 
    border-bottom: 2px solid #3949ab;
    transition: all 0.1s ease 0s;
}
.primary-menu .toggle-menu ul{
    display:table; 
    width:25px;
}
.primary-menu .toggle-menu ul li{
    width:100%; 
    height:4px; 
    background-color:#3949ab; 
    margin-bottom:4px;
}
.primary-menu .toggle-menu ul li:last-child{
    margin-bottom:-8px;
}
.primary-menu input[type=checkbox], label{
    display:none;
}
@media only screen and (max-width: 680px) {
.primary-menu input[type=checkbox] {
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    background:none;
    }
.primary-menu input[type=checkbox]:focus{
    background:none;
    }
.primary-menu {
    height: 34px;
}
    .primary-menu .toggle-menu ul{
    display:table; 
    width:25px;
    position: absolute;
    right: 10px;
    margin-top: 0px;
    list-style-type: none;
}
.primary-menu label{
    position: absolute;
    right: 0;
    padding:8px 0px; 
    display:inline-block; 
    cursor:pointer; 
    }
.primary-menu input[type=checkbox]:checked ~ nav{
    display:block;
    }
.primary-menu nav{
    display:none; 
    position:absolute; 
    right:0px; 
    top:50px; 
    background-color:#f8f9fa; 
    border: 2px solid #ddd;
    border-top: none;
  border-bottom: none;
    padding:0px; 
    z-index:999;
  }
.primary-menu nav ul{
    width:250px;
    margin: 0px;
  }
.primary-menu nav ul li{
    float:none; 
    padding:0; 
    width:100%; 
    display:table;
    }
.primary-menu nav ul li a{
    color:#000; 
    font-size:15px; 
    padding:10px 20px;
    display:block; 
    border-bottom: 1px solid #ddd;
    }
}

Kindly do point the error in my code and suggest improvements.