fixing margin and padding on navigtion bar dropdown - css

Question

currently when you hover over the drop down you will see the drop down links. in the drop down menu to the left of the links there is a gap. I would like that gap removed.
this is for my navigation bar drop down in desktop mode only.
this for my website JGittech.com.
it needs me to type more
all help would be appreciated
/*! CSS Used from: https://jgittech.com/stylesheets/nav.v5.css */
* {
box-sizing: border-box;
font-family: Arial,Helvetica,sans-serif
}
.menu-item-has-children .menu-li .nav-ul-li-a:hover,.sub-menu .menu-li .nav-ul-li-a:hover,.sub-menu .menu-li:hover {
background: #006084;
color: #fff
}
.navcontainer {
z-index: 999;
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%
}
.active {
background: #009fd8;
color: #fff
}
.main-navigation {
background: #333
}
.nav-ul,body {
list-style-type: none;
padding: 0;
margin: 0
}
.fixednav,.menu {
display: flex
}
.menu {
flex-direction: column
}
.menu-li {
display: block;
list-style-type: none
}
.menu .nav-ul-li-a {
display: block;
text-align: center;
text-decoration: none;
color: #fff;
padding: 20px 1rem
}
.menu-li .nav-ul-li-a:hover,a:hover {
color: #fff
}
.nav-ul-ul {
display: none
}
.nav-ul .menu-li:hover>ul {
max-width: 100%;
display: block;
color: #fff
}
.fixednav {
flex-direction: row;
z-index: 9999;
width: 100%;
height: 60px
}
.leftnav {
line-height: 20px
}
#media (min-width:800px) {
.menu {
display: flex;
flex-direction: row;
justify-content: flex-start
}
.nav-ul .menu-li:hover>ul {
background: #333
}
.nav-ul .menu-li:hover>.nav-ul-li-a,.sub-menu .menu-li .nav-ul-li-a:hover,.sub-menu .menu-li:hover {
background: #006084;
color: #fff
}
.sub-menu .menu-li {
display: flex;
padding-right: 1em
}
.nav-ul-ul {
position: absolute
}
.nav-ul-ul,input[data-function*=swipe],label[data-function*=swipe] {
display: none
}
}
#media (max-width:799px) {
.nav-ul .menu-li:hover>ul {
background: #263249
}
.nav-ul .menu-li:hover>.nav-ul-li-a {
color: #fff
}
.menu-item-has-children .menu-li .nav-ul-li-a:hover,.sub-menu .menu-li .nav-ul-li-a:hover,.sub-menu .menu-li:hover {
background: #006084;
color: #fff
}
.fixednav,.nav-ul-ul {
display: block
}
label[data-function*=swipe] {
display: block;
position: absolute;
top: 30px;
left: 30px;
z-index: 1;
width: 42px;
height: 42px;
font: 42px fontawesome;
text-align: center;
color: #333;
cursor: pointer;
transform: translate3d(0,0,0);
transition: transform .3s
}
.fixednav {
text-align: left
}
.menu .nav-ul-li-a {
display: block;
text-decoration: none;
padding: 0 20px;
color: #fff;
border: 3px solid #fff;
text-align: center;
font-size: 18px;
font-weight: 900;
padding: 20px 1rem;
margin: 0 20px
}
.nav1contain {
display: flex;
height: 60px
}
input[data-function*=swipe] {
position: absolute;
opacity: 0
}
label[data-function*=swipe]:hover {
color: #263249
}
input[data-function*=swipe]:checked~label[data-function*=swipe] {
transform: translate3d(280px,0,0)
}
label[data-function*=swipe]:checked {
display: block
}
label:nth-child(2) {
display: none
}
input[data-function*=swipe]:checked~label:nth-child(2) {
display: block;
transform: translate3d(280px,0,0)
}
input[data-function*=swipe]:checked~label:nth-child(3) {
display: none
}
input[data-function*=swipe]:checked~.sidebar {
transform: translate3d(0,0,0)
}
input[data-function*=swipe]:checked~.sidebar .menu-li {
width: 100%
}
.sidebar {
transform: translate3d(-280px,0,0);
position: absolute;
width: 280px;
background: #263249;
color: #eee;
left: 0;
transition: all .3s
}
.menu-li {
display: inline-block;
padding: 10px;
list-style: none;
background: #263249;
list-style-type: none
}
.menu-item-has-children:hover {
display: block
}
}
.button {
display: block;
width: calc(100% - 30px);
height: 40px;
margin: 2% 15px;
background-color: #009fd8;
box-shadow: 0 6px 9px rgba(50,50,93,.06),0 2px 5px rgba(0,0,0,.08),inset 0 1px 0 #ffb9f6;
border-radius: 4px;
color: #fff;
font-weight: 600;
cursor: pointer
}
.active2 {
background: #00569b;
color: #fff
}
<div class="nav1contain">
<input data-function="swipe" id="swipe" type="checkbox">
<label data-function="swipe" for="swipe"></label>
<label data-function="swipe" for="swipe"></label>
<div class="navcontainer sidebar">
<nav class="main-navigation fixednav menu">
<ul class="menu nav-ul">
<li class = "menu-li"><a class = " active leftnav nav-ul-li-a" href="../index.html">Home</a></li>
<li class = "menu-li"> <a class = "nav-ul-li-a " href="pages/about.html">About</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/products.html">Products</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/contact.html">Contact</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="https://statuspage.freshping.io/13300-JGittechLLCStatusPage/check/91333">Status</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="../sitemap.html">Sitemap</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/video.html">Videos</a> </li>
<li class="menu-item-has-children menu-li"> <a class ="nav-ul-li-a" href="#">Legal +</a>
<ul class="nav-ul-ul">
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/legal/terms.pdf">Terms of Use</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/legal/privacy.pdf">Privacy Policy</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/legal/disclaimer.pdf">Disclaimer Policy</a> </li>
<li class = "menu-li"><a class = "nav-ul-li-a" href="pages/legal/cookie.html">Cookie Policy</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/legal/return.pdf">Return Policy</a> </li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
.

Answer 1

.nav-ul-ul { padding:0; } should do the trick.