<h1>Text centred in Middle of screen despite left and right offsets</h1>
<div class="wrap">
  <div class="left">Logo goes here</div>
  <nav class="middle">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </nav>
  <div class="right">right side img</div>
</div>

<div class="wrap">
  <div class="left">left</div>
  <div class="middle">center</div>
  <div class="right">right side is longer</div>
</div>

<div class="wrap">
  <div class="left">left side is longer than right</div>
  <div class="middle">center</div>
  <div class="right">right side</div>
</div>

<div class="wrap">
  <div class="left">left</div>
  <div class="middle">center is longer than right or left</div>
  <div class="right">right side</div>
</div>

<div class="wrap">
  <!-- no left element -->
  <div class="middle">centered element but no left element</div>
  <div class="right">right side</div>
</div>

<div class="wrap">
  <div class="left">left</div>
  <div class="middle">center is much longer than right or left and still centred</div>
  <div class="right">right side</div>
</div>

<div class="wrap">
  <div class="left">left</div>
  <div class="middle">center takes up all the width - center center center center center center center center center center center center center center center center center center center center center center center center center center center center center </div>
  <div class="right">right side contains this much text</div>
</div>
<p>&#8593;<br>true center</p>
<hr>
<div>
  <a href="https://codepen.io/paulobrien/pen/bGBeEPY" target="_blank">See centred in available space versions</a>
</div>
<div>
  <a href="https://codepen.io/paulobrien/pen/omQGbd" target="_blank">See perfectly centred version 2</a>
</div>
<hr>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}
h1 {
  text-align: center;
}
/* centering technique below */
.wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "lside middle rside";
  background-color: #eee;
  padding: 10px;
  margin: 1rem 0;
}
.left {
  grid-area: lside;
  background: #eee;
  padding: 10px;
}
.middle {
  grid-area: middle;
  background: #ccc;
  padding: 10px;
}
.right {
  grid-area: rside;
  background: #eee;
  padding: 10px;
}
/* right or left side text cannot wrap or will be squashed small.
*/
.right {
  white-space: nowrap;
  text-align: right;
}
.left {
  white-space: nowrap;
  text-align: left;
}

section > * {
  border: 1px solid #bbb;
  padding: 2px;
}
p {
  text-align: center;
}

nav a {
  padding: 0 10px;
  color: red;
  text-decoration: none;
}
nav a:hover {
  background: red;
  color: #fff;
}