/*
<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%;
}