title: CSS - Centered container in fixed sticky header
body: <p>I'm having some problems with CSS, Basically i want a main container and a fixed sticky header. The main container has a width of 900px but i want the header to stretch the whole page. I have got this but i also wanted there to be a separate container within the container that is 900 pixels long but within the  header container. Hard to explain but this is what i have so far:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;link href="Style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="Header"&gt; 
      &lt;div id="Centerheader"&gt;
      This should be centered in the header.
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="Main"&gt;
  This is a test.
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#Main {
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      margin-right: auto;
      margin-left: auto;
      width: 900px;
      height: 1200px;
      padding: 20px;
      border-style: solid;
      border-width: 1px;
      border-color: #000000;
      margin-top: 120px;
   }
  
  #Header {
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-bottom-color: #000000;
      width: 100%;
      position: fixed;
      height: 120px;
      background-color: #333333;
      top: 0px;
   }
  
  #Centerheader {
       width: 900px;
       height: 120px;
       position: fixed;
       top: 0px;
       margin-right:auto;
       margin-left: auto;
  }
  
  }
  </code></pre>
  
  <p>Hopefully I have explained this well enough.
  Thanks,
  Skurope</p>