:host {
  flex-basis: 25%;
  padding-right: 5px;
  margin-left: 5px;
}
@media only screen
and (max-device-width: 767px) {
  :host {
    display: none;
  }
}
nav {
  background-color: white;
  min-height: 400px;
  padding-top: 20px;
}
a {
  display: block;
  width: 100%;
  padding: 5px 30px;
  font-size: 1.2em;
  white-space: nowrap;
}
a:hover, a:focus, a.active {
  background-color: #ddd;
}

:host {
  flex-basis: 25%;
  padding-right: 5px;
  margin-left: 5px;
  min-width: 0;
}
@media only screen
and (max-device-width: 767px) {
  :host {
    display: none;
  }
}
nav {
  background-color: white;
  min-height: 400px;
  padding-top: 20px;
}
a {
  display: block;
  width: 100%;
  padding: 5px 30px;
  font-size: 1.2em;
  white-space: nowrap;
}
a:hover, a:focus, a.active {
  background-color: #ddd;
}

Make sure column doesn't expand with nowrap text
Make sure column doesn't expand with nowrap text
