mobile screen showing large gaps inbetween menu items - html

Question

My mobile menu has large gaps in between the list items, my code does not help me, can anyone else see something?
This is most likely due to px or some other screen-scaled metric not translating properly onto the mobile resolution.
I have tried unsuccessfully to upload a supporting image.
html, body
{
font-family: "Lato", sans-serif;
width: 100%;
height: auto; margin: 0;
}
.nav {
background-color: #3333FF;
width: 100%;
height: 40px;
line-height: 40px;
}
.menu {
font-family: Monserrat, sans-serif;
font-size: 18px;
color: white;
list-style-type: none;
padding: 0;
position: relative;
z-index: 1;
}
.menu a {
text-decoration: none;
color: #fff;
line-height: 40px; /* Line height 40px, not 40-px */
}
.menu ul li {
text-align: center;
display: inline;
padding: 10px;
width: 11.11%;
}
.menu li:visited, .menu li:active, .active, .menu li:hover
{
background: #0000EE;
color: #fff;
}
label {
margin: 0 14px 0 0;
font-size: 20px;
display: none;
}
#toggle {
display: none;
}
/* Show Hamburger */
#media screen and (max-width: 500px) {
label {
cursor: pointer;
display: block;
color: #fff;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
background-color: #999;
margin:0;
padding: 0;
}
#toggle:checked + .menu {
display: block;
}
} /* A finishing bracket was missing */