Горизонтальное меню с элементами одинаковой ширины

<nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</nav>

<nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav>

nav {
  display: block;
  position: relative;
}
nav:after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  background: linear-gradient(90deg, 
    #CDE0EE, #CDE0EE 20%,
    #EBF0F3 20%, #EBF0F3 40%, 
    #9BB0C1 40%, #9BB0C1 60%, 
    #5D8BAD 60%, #5D8BAD 80%,
    #041E34 80%, #041E34 100%);
}
ul {
  width: 660px;
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
  overflow: hidden;
}
li {
  float: left;
  width: 25%;
}
a {
  text-decoration: none;
  text-align: center;
  display: block;
  color: #868686;
  padding: 0.5em 0;
  font-size: 2em;
  font-weight: bold;
  transition: 0.5s ease-in-out;
  font-family: 'Montez', cursive; /*скачать шрифт можно с сайта https://www.google.com/fonts/*/
}
a:hover {
  color: #f70211;
}

nav { display: block; position: relative; } nav:after { content: ""; display: block; width: 100%; height: 5px; position: absolute; left: 0; background: linear-gradient(90deg, #CDE0EE, #CDE0EE 20%, #EBF0F3 20%, #EBF0F3 40%, #9BB0C1 40%, #9BB0C1 60%, #5D8BAD 60%, #5D8BAD 80%, #041E34 80%, #041E34 100%); } ul { width: 660px; margin: 0 auto; padding-left: 0; list-style: none; overflow: hidden; } li { float: left; width: 25%; } a { text-decoration: none; text-align: center; display: block; color: #868686; padding: 0.5em 0; font-size: 2em; font-weight: bold; transition: 0.5s ease-in-out; font-family: 'Montez', cursive; /*скачать шрифт можно с сайта https://www.google.com/fonts/*/ } a:hover { color: #f70211; }