HTML submenu in main dropdown is displaying away from the main dropdown

How to remove that gap between main dropdown and submenu? When I added more contents to the dropdown, the gap between submenu and main dropdown also increases. And if I keep mouse pointer in between the main dropdown and sub-dropdown-menu, it flickers. I am posting the screenshot along with CSS and HTML here:

    .nav-menu, .nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu > ul > li {
  position: relative;
  white-space: nowrap;
  float: left;
}

.nav-menu > ul > li + li {
  padding-left: 20px;
}

.nav-menu a {
  display: block;
  position: relative;
  color: #1a000d;
  padding: 14px 0 15px 0;
  transition: 0.3s;
  font-size: 14px;
  font-weight:bold;
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
}

.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
  color: #005ce6;
  text-decoration: none;
}

.nav-menu .drop-down ul {
  display: block;
  position: absolute;
  left: 20px;
  top: calc(100% - 30px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: ease all 0.3s;
}

.nav-menu .drop-down:hover > ul {
  opacity: 1;
  top: 100%;
 
  visibility: visible;
}

.nav-menu .drop-down li {
  min-width: 180px;
  position: relative;
}

.nav-menu .drop-down ul a {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  color: #1a000d;
}

.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
  color: #005ce6;
  font-size: 14px;
  font-weight:bold;
}

.nav-menu .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}

.nav-menu .drop-down .drop-down ul {
  top: 0;
  left: calc(100% - 30px);
}

.nav-menu .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
}

.nav-menu .drop-down .drop-down > a {
  padding-right: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
  content: "\eaa0";
  font-family: IcoFont;
  position: absolute;
  right: 15px;
}

@media (max-width: 1366px) {
  .nav-menu .drop-down .drop-down ul {
    left: -90%;
  }
  .nav-menu .drop-down .drop-down:hover > ul {
    left: -100%;
  }
  .nav-menu .drop-down .drop-down > a:after {
    content: "\ea9d";
  }
}

 <nav class="nav-menu d-none d-lg-block">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="services.html">Gallery</a></li>
          <li class="drop-down"><a href="">Courses</a>
            <ul>
              <li class="drop-down"><a href="#">IELTS Regular</a>
               <ul>
                  <li><a href="#">Academic Training</a></li>
                  <li><a href="#">General Training</a></li>
                  
                </ul>
              </li>
              <li class="drop-down"><a href="#">IELTS WEEKEND BATCH</a>
                <ul>
                  <li><a href="#">Academic Training</a></li>
                  <li><a href="#">General Training</a></li>
                  
                </ul>
              </li>
             
             
               <li><a href="#">IELTS ONLINE</a></li>
               
               <li class="drop-down"><a href="#">OET Regular</a>
                <ul>
                  <li><a href="#">Listening sub-test</a></li>
                  <li><a href="#">Reading sub-test</a></li>
                  <li><a href="#">Speaking sub-test</a></li>
                  <li><a href="#">Role-plays</a></li>
                  <li><a href="#">Writing sub-test </a></li>
                 
                  
                </ul>
              </li>
              
              <li><a href="#">OET Online</a></li>
               <li><a href="#">DHA, HAAD, MOH, Prometric </a></li>
               
                <li class="drop-down"><a href="#">7 Days crash course for Nurses</a>
                <ul>
                  <li><a href="#">PROMETRIC EXAM for SAUDI</a></li>
                  <li><a href="#">PROMETRIC EXAM for OMAN</a></li>
                  <li><a href="#">PROMETRIC EXAM for QATAR</a></li>
                  <li><a href="#">DHA for DUBAI</a></li>
                  <li><a href="#">HAAD for ABU DHABI</a></li>
                 
                  
                </ul>
              </li>
              
               <li><a href="#">RN Regular</a></li>
               
               
                <li class="drop-down"><a href="#">10 Days Pharmacy Crash Course</a>
                <ul>
                  <li><a href="#">HAAD</a></li>
                  <li><a href="#">DHA</a></li>
                  <li><a href="#">MOH</a></li>
                  <li><a href="#">PROMETRIC</a></li>
                    
                </ul>
              </li>
              
              <li class="drop-down"><a href="#">PHARMACY REGULAR COURSE</a>
                <ul>
                  <li><a href="#">PEBC</a></li>
                  <li><a href="#">CAPS</a></li>
                  <li><a href="#">OSPAP</a></li>
                  
                    
                </ul>
              </li>
              
              
            </ul>
          </li>
          
          
          <li><a href="">Exams</a></li>
          <li><a href="">Jobs</a></li>
          <li><a href="">News</a></li>
          <li><a href="">Career</a></li>
         
          <li><a href="contact.html">Contact</a></li>
          <li><a href="">Login</a></li>
           <li ><a class="onlineclass" href="">Online class</a></li>
          

        </ul>
      </nav>

Solution

You should make another @media query or adjust the max-width if you want to make the sub menu bar the same when zoom 100.

For the flickering part when hovering, it's happening because you are selecting the sub-menu bar that will go away and the sub menu that will show and goes to the left side. try to hover the drop down bar from the right side and it will not flicker.

change the the left side of sub menu