почему пункты моего меню перекрываются на маленьком экране?

Question

Используя CSS-сетку, мои пункты меню правильно отображаются на большом экране, но они перекрываются на маленьком экране. Пожалуйста, в чем причина и как я могу это исправить?

Я вставил сюда только код CSS, и вы можете щелкнуть ссылку ниже, чтобы просмотреть весь код, т. Е. HTML и CSS.

полный исходный код: http://jsfiddle.net/x89Lop5t/

Код CSS:

*{
  box-sizing:border-box;
}
body {
  background-color:#003EBB;
}
 /*styling the css grid container */
.container{
  display:grid;
  grid-template-columns: repeat(6 , 1fr);
  grid-auto-row: 150px;
  grid-gap:20px;
  align-items: center;
  grid-template-areas:
    ". . . . . mh"
    ". . nv nv nv ."
}

/*end of css grid container */


/*styling the grid items */
.miniHeader{
  grid-area:mh;
}
.miniHeader ul li{
  display:inline;
  margin-left:20px;
  list-style:none;
  margin-top:1px;

}


.miniHeader ul li a{
 text-decoration: none;
 color:white;

}

nav{
  grid-area: nv;
}

nav ul li{
  display:inline;
  border: 1px solid  white;
  border-radius: 10px;
  padding:10px;
  margin-left: 5px;

}

nav ul li a{
  color:white;
  padding:20px;
  text-decoration:none;

}

Answer 1

Используйте display:inline-block вместо display:inline.

 nav ul li{
 display:inline-block;
 border: 1px solid  white;
 border-radius: 10px;
 padding:10px;
 margin-left: 5px;
 }

Answer 2

Вы должны использовать display:inline-block для навигации вместо display:inline. Вы должны использовать display:inline для оформления встроенных элементов.

* {
  box-sizing: border-box;
}

body {
  background-color: #003EBB;
}


/*styling the css grid container */

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-row: 150px;
  grid-gap: 20px;
  align-items: center;
  grid-template-areas: ". . . . . mh" ". . nv nv nv ."
}


/*end of css grid container */


/*styling the grid items */

.miniHeader {
  grid-area: mh;
}

.miniHeader ul li {
  display: inline;
  margin-left: 20px;
  list-style: none;
  margin-top: 1px;
}

.miniHeader ul li a {
  text-decoration: none;
  color: white;
}

nav {
  grid-area: nv;
}

nav ul li {
  display: inline-block;
  border: 1px solid white;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 5px;
  margin-left: 5px;
}

nav ul li a {
  color: white;
  padding: 20px;
  text-decoration: none;
}

<div class="container">
  <div class="miniHeader">
    <ul>
      <li><a href="#loginsection">Login</a></li>
      <li><a href="#regsection">Register</a></li>
    </ul>
  </div>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Map</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</div>