title: Aligning three elements (left/center/right) inside a container
body: <p>I am attempting to create a full-width banner with three internal inline elements. A back link, a logo and a forward link.</p>
  
  <p><a href="https://i.stack.imgur.com/Ju494.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ju494.png" alt="enter image description here"></a></p>
  
  <p>I would also like to use the same code to create a full-width banner with TWO internal inline elements. A left back link and a central logo.</p>
  
  <p><a href="https://i.stack.imgur.com/VHzLJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VHzLJ.png" alt="enter image description here"></a></p>
  
  <p>What I have so far, is:</p>
  
  <p><em>HTML</em></p>
  
  <pre><code> &lt;section id="header-blue"&gt;
    &lt;div id="header-wrap"&gt;
      &lt;div class="header-left"&gt;&lt;p&gt;1&lt;/p&gt;&lt;/div&gt;
      &lt;div class="header-center"&gt;&lt;p&gt;2&lt;/p&gt;&lt;p&gt;2&lt;/p&gt;&lt;p&gt;2&lt;/p&gt;&lt;p&gt;2&lt;/p&gt;&lt;/div&gt;
      &lt;div class="header-right"&gt;&lt;p&gt;3&lt;/p&gt;&lt;p&gt;3&lt;/p&gt;&lt;/div&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><em>SCSS:</em></p>
  
  <pre><code>#header-blue {
    width: 100%;
    margin-bottom: 50px;
    height: auto;
    background-color: $primary-blue;
    color: #fff;
  
    #header-wrap {
      text-align: center;
      border: 1px solid green;
      margin: 0 auto;
      padding: 1rem 2.5rem;
      div {
        display: inline-block;
        vertical-align: middle;
      }
    }
  
    .header-left {
      float: left;
      border: 1px solid red;
      width: 100px;
    }
    .header-right {
      float: right;
      border: 1px solid red;
      width: 100px;
    }
    .header-center {
      border: 1px solid red;
      margin: 0 auto !important;
      display: inline-block;
      width: 100px;
    }
  
  } // header-blue
  </code></pre>
  
  <p>I am looking for a solution that is widely supported, so I'm not sure if that rules flex out?</p>
  
  <p><strong>The result is this: <a href="https://jsfiddle.net/5gxLvp8a/3/" rel="nofollow noreferrer">FIDDLE</a></strong></p>
  
  <p><a href="https://i.stack.imgur.com/iqLzp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iqLzp.png" alt="enter image description here"></a></p>
  
  <p>EDIT:
  <strong>THE FINAL CORRECT DESIGN WHEN COMPLETE</strong>
  <a href="https://i.stack.imgur.com/LQhOU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LQhOU.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/wGkdQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wGkdQ.png" alt="enter image description here"></a></p>
  
  <p><strong><em>Disclaimer:</em></strong> <em>Please understand that although this may be viewed as a 'duplicate' post, after a fair few hours of online research and trial and error, I am still no further progressed. I would, therefore, like to seek help unique to this problem and learn in the process.</em></p>