<h1>Centre middle item in available space (Not central in viewport)</h1>
<!-- display table example -->
<h2>Display table-cell example</h2>
<div class="navigation nav1">
  <div class="left">Logo</div>
  <nav class="nav">
    <a href="Portfolio.html">ES</a>
    <a href="Portfolio.html">Ens Design</a>
    <a href="contact.html">Contact</a>
    <a href="About.html">About</a>
  </nav>
  <div class="right">right content or img</div>
</div>

<!-- old floated example -->
<h2>Old Floated example </h2>
<div class="navigation nav2">
  <div class="left">Logo</div>
  <div class="right">right content or img</div>
  <nav class="nav">
    <a href="Portfolio.html">ES</a>
    <a href="Portfolio.html">Ens Design</a>
    <a href="contact.html">Contact</a>
    <a href="About.html">About</a>
  </nav>
</div>

<!-- Flexbox example -->
<h2>Flexbox example </h2>
<div class="navigation nav3">
  <div class="left">logo</div>
  <nav class="nav">
    <a href="Portfolio.html">ES</a>
    <a href="Portfolio.html">Ens Design</a>
    <a href="contact.html">Contact</a>
    <a href="About.html">About</a>
  </nav>
  <div class="right">right content or img</div>
</div>

<!-- Grid example -->
<h2>Grid example </h2>
<div class="navigation nav4">
  <div class="left">Logo</div>
  <nav class="nav">
    <a href="Portfolio.html">ES</a>
    <a href="Portfolio.html">Ens Design</a>
    <a href="contact.html">Contact</a>
    <a href="About.html">About</a>
  </nav>
  <div class="right">right content or img</div>
</div>
<hr>
<div>
  <a href="https://codepen.io/paulobrien/pen/jOVrWaG" target="_blank">See perfectly centred version 1</a>
</div>
<div>
  <a href="https://codepen.io/paulobrien/pen/omQGbd" target="_blank">See perfectly centred version 2</a>
</div>

h1,
h2 {
  margin: 1rem 0 0;
  text-align: center;
}
/* old school method */
.nav1 {
  display: table;
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 10px;
  background: #ccc;
}
.nav1 .left,
.nav1 .right,
.nav1 .nav {
  display: table-cell;
  background: #eee;
  width: 1px;
  white-space: nowrap;
}
.nav1 .nav {
  background: #ccc;
  width: auto;
  text-align: center;
}

/*example 2 old floated method */

.nav2 {
  display: table; /* contain floats*/
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 10px;
  background: #ccc;
}
.nav2 .left {
  float: left;
  background: #eee;
}
.nav2 .right {
  float: right;
  background: #eee;
}
.nav2 .nav {
  background: #ccc;
  width: auto;
  text-align: center;
}

/* Example 3 Flexbox method */
.nav3 {
  display: flex;
  max-width: 1280px;
  margin: auto;
  padding: 10px;
  background: #ccc;
}
.nav3 .left,
.nav3 .right {
  background: #eee;
}
.nav3 .nav {
  background: #ddd;
  margin: auto;
  padding: 0 10px;
}

/* Example 4 Flexbox method */
.nav4 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  max-width: 1280px;
  margin: auto;
  padding: 10px;
  background: #ccc;
}
.nav4 .left,
.nav4 .right {
  background: #eee;
}
.nav4 .nav {
  background: #ddd;
  margin: auto;
  padding: 0 10px;
}