Mobile sub-nav bar spacing

There is so much space between my subnav items that they don’t all show up on mobile. How can I lessen the space between menu items?
Thanks, Jana

Here is what I have for css:
/*3rd level menu indent*/
.dropdown-click .main-navigation ul ul ul.toggled-on, .dropdown-click .main-navigation ul ul li.sfHover > ul.toggled-on {
padding-left: 10px;
}
/*3rd level menu typography*/
.dropdown-click .main-navigation ul ul ul.toggled-on > li >a, .dropdown-click .main-navigation ul ul li.sfHover > ul.toggled-on >li >a {
font-size:16px;
line-height: 10px;
}
@media (max-width: 768px) {
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: 108px;
}
.menu-toggle, .main-navigation .mobile-bar-items a {
line-height: 108px;
}
}
@media (max-width: 768px) {
.navigation-branding img, .site-logo.mobile-header-logo {
height: 108px;
}
}
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #fe7c40;
border: 1px solid #5e5339;
color: #5e5339;
line-height: 35px; /*this number will likely need to be adjusted*/
}
}
.navigation-search {
top: 100%;
max-width: 600px;
margin: auto;
}
.main-navigation .main-nav ul ul li a {
padding-left: 20px;
}
.main-navigation .main-nav ul ul ul li a {
padding-left: 35px;
}
.main-navigation .main-nav ul ul li:not(:last-child) a {
border-bottom: .5px solid #fff;
}
.main-navigation.toggled .main-nav ul li a {
line-height: 40px;
}