title: Aligning full width fixed header with main content?
body: <p>First question so sorry if this is a bit squiffy. </p>
  
  <p>I'm trying to get a full (100%) width fixed header with content within, such as logo and navigation links, that is aligned to the main container. I'd like to do this without the use of margining left or right on the logo/nav content as that doesn't seem particularly flexible.</p>
  
  <p>I tried putting the header div within the container block, that fixes the alignment issue but then I can no longer go full width.</p>
  
  <p>So basically how do I get content in a full width fixed header to align with content in the main content of the page?</p>
  
  <p>Here is my html (sorry if its messy, I've only been at this a week or so):</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="header"&gt;
      &lt;div id="logo"&gt;
      &lt;/div&gt;
      &lt;div id="nav"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="container"&gt;
          &lt;div id="content"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is my CSS, I left the logo image out and in place is just a beige block:</p>
  
  <pre><code>body {
  margin: 0px;
  background-color: darkgray;
  }
  
  #header{
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0px;
  background-image: url("images/bg-header.jpg");
  opacity: 0.9;
  }
  
  #logo {
  height: 100%;
  width: 300px;
  background-color: beige;
  }
  
  #container {
  width: 960px;
  margin: 0px auto;
  height: 1000px;
  background-color:gray;
  }
  
  #footer{
  width: 100%;
  height: 100px;
  background-image: url("images/bg-header.jpg");
  }
  </code></pre>
  
  <p>Any advice? </p>
  
  <p>Thank-you</p>