title: How to center a 1200px div above a full-width image element
body: <p>I'm sorry if this is a duplicate, I couldn't find an answer using the keywords I thought to try. I have a site built where the main header image is built using an <code>&lt;img&gt;</code> tag. I do this so that the image element can define the height of the header container and be responsive.</p>
  
  <p>Like so:</p>
  
  <pre><code>&lt;div class="header"&gt;
    &lt;img src="bg.jpg"&gt;
    &lt;div class="nav-container"&gt;
      &lt;!-- nav stuff --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Within that same container I'd like to have a nav menu and possibly some hero text, but I'd like it all to be constrained to a 1200px wide, centered <code>&lt;div&gt;</code>. Normally I would achieve that by doing something like:</p>
  
  <pre><code>.header {
    position: relative;
  }
  
  .header img {
    max-width: 100%;
    height: auto;
  }
  
  .header .nav-container {
    width: auto;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
  </code></pre>
  
  <p>Naturally, with this CSS the <code>&lt;img&gt;</code> element pushes the nav down. The problem is, as soon as I stick <code>position: absolute;</code> in the nav CSS, it no longer centers. It seems to honour the max-width of 1200px, but it doesn't "float" in the center of the header anymore. It just goes left or right depending on my top/left/right values.</p>
  
  <p><strong>TL;DR - How can I have a 1200px div centered above a full-width image element?</strong></p>