title: Create a multi-div, centered, responsive header
body: <p>As simple as it must be, there doesn't appear to be anything at this site that addresses this exactly as shown.</p>
  
  <p>I've tried everything I can image, without satisfaction.  Likewise, I'm disappointed with all the extra code that finds its way into my page when I adapt methods designed for slightly different scenarios.</p>
  
  <p>This is essentially what I want to achieve:
  <a href="http://q-beans.ca/header/headerSKETCH2.png" rel="nofollow noreferrer">full-screen and resized screen responsive layouts http://q-beans.ca/header/headerSKETCH2.png</a></p>
  
  <p>Please note in (2), the resized version, that the header background increases in height to accommodate the floated blue div. The logo is unchanged in size. Only the rightmost, blue div decreases in width after the screen gets below 660px.</p>
  
  <p>In my attempts, the centered content below the header remains centered as it should.  The header, however, has not been willing to cooperate.  Surely there is a concise, valid way to code the header without javascript that covers what I've been missing.  </p>