title: CSS and HTML centering an <h1> next to an <img>
body: <p>Right now I have...</p>
  
  <pre><code>&lt;header id="background-color"&gt;
      &lt;img src="header_image.gif" alt="header"&gt;   
      &lt;h1&gt;Header&lt;/h1&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>and the relevant CSS is...</p>
  
  <pre><code>header {
      background: #0072bc;
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
  }
  #background-color {
      background: #0066CC;
      width: 100%;
  }
  </code></pre>
  
  <p>This puts the image above the h1 obviously.  What I'd like to do is left-justify the image and have the h1 centered relative to the whole page (not just the remaining space).</p>
  
  <p>And when I say left-justify, I mean relative to the body and header which are set to be 70% with auto margins.  I've got no idea how to do this, I'm totally new to web design.</p>
  
  <p>Thanks.</p>