мобильный экран, показывающий большие промежутки между пунктами меню

Question

Мое мобильное меню имеет большие промежутки между пунктами списка, мой код не помогает мне, кто-нибудь еще может что-то увидеть?

Скорее всего, это связано с тем, что px или каким-либо другим масштабным показателем, отображаемым на экране, не транслируется должным образом на разрешение мобильного телефона.

Я безуспешно пытался загрузить изображение поддержки.

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 */