JSFiddle - React, Tailwind, and code Playground

lynda.com CSS #2 - float vs display

by totoromaum

HTML

<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>

CSS

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

/* Navigation using 'display' */
.display {
  text-align: center;
  font-size:0;
}
.display a {
  padding:10px;
  display: inline-block;
  width:25%;
  /* margin-left:-1% */
  font-size: 16px;

}

/* Navigation using 'float' */
.float {
overflow:hidden;
}
.float a {
float: left;
padding: 10px;
width: 25%;
}