Cacher is the code snippet organizer for pro developers

/*
<nav class="display">
  <a href="#">About</a>
  <a href="#">Work</a>
  <a href="#">Education</a>
  <a href="#">Contact</a>
</nav>

<nav class="float">
  <a href="#">About</a>
  <a href="#">Work</a>
  <a href="#">Education</a>
  <a href="#">Contact</a>
</nav>
*/

/* General styles */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
nav {
  background: purple;
  margin-bottom: 5px;
}
a {
  background: lightblue;
}

/* Navigation using 'display' */
/* These would be equivalent */
.display {
  text-align: center;
  font-size: 0; /*step1 to remove space between elements*/
}
.display a {
  display: inline-block;
  padding:30px;
  font-size: 1rem; /*step2 to remove space between elements*/
  width: 25%;
}

/* Navigation using 'float' */
.float {
  text-align: center;
}
.float a {
  float: left;
  padding: 30px;
  width: 25%;
}