Simple Navigation With Inline-Block & Flexbox

index.html

<nav>
  <div>
    <a href="#">Home</a>
    <a href="#">Products</a>
    <a href="#">About</a>
  </div>
  <a href="#">Help</a>
</nav>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

simple-navigation-with-inline-block-flexbox.markdown

Simple Navigation With Inline-Block & Flexbox

An example combining display: inline-block with flexbox, used as the final illustration for an article on my blog

A Pen by rafalohaki on CodePen.

License.

style.css

nav {
  background: #222 url(//demosthenes.info/assets/images/debut_dark.png);
  font-family: proxima-nova,sans-serif;
  font-size: 0;
  display: flex;
  justify-content: space-between;
  max-width: 800px; 
  margin: 2rem auto;
}
nav a {
  font-size: 1.4rem;
  color: #fff;
  text-decoration: none;
  transition: .4s;
  display: inline-block;
  padding: 1rem;
}
nav a:hover {
  background: rgba(255,0,0,0.5);
}