title: Center align entire webpage
body: <p>I'm having trouble center aligning my entire webpage template, I've created a basic mock up of what I want my pages to look like but cannot seem to center it. </p>
  
  <p>The code is as follows</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link href="../css/website_css.css" rel="stylesheet" type="text/css"&gt;
  &lt;style type="text/css"&gt;
  body {
      background-color: #000;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="container"&gt;
  &lt;div id="header"&gt;
  
    &lt;div id="nav"&gt;
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;p&gt;Home | About Us | Events | Gallery | More...
      &lt;/p&gt;
    &lt;/div&gt; 
    &lt;div id="logotop"&gt;&lt;img src="../Images/images/Logotop.png" width="200" height="100"&gt;&lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;div id="middletop"&gt;
  
      &lt;div id="logobottom"&gt;&lt;img src="../Images/images/Logobottom.png" width="200" height="100"&gt;&lt;/div&gt;
    &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;p&gt;Page Name&lt;/p&gt;&lt;/div&gt;
  
  &lt;div id="middle"&gt;
      &lt;div id="twitter"&gt;
        &lt;p&gt;This is where the Twitter link will go      &lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="facebook"&gt;
        &lt;p&gt;This is where the FB link will go      &lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div id="middlebottom"&gt;
  
      &lt;div id="sectionone"&gt;
        &lt;p&gt;&amp;nbsp;&lt;/p&gt;
        &lt;p&gt;&amp;nbsp;&lt;/p&gt;
        &lt;p&gt;Section one text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="sectiontwo"&gt;
        &lt;p&gt;&amp;nbsp;&lt;/p&gt;
        &lt;p&gt;&amp;nbsp;&lt;/p&gt;
        &lt;p&gt;Section two text&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;div id="bottom"&gt;
  
  
  &lt;div id="sectionthree"&gt;
        &lt;p&gt;&amp;nbsp;&lt;/p&gt;
        &lt;p&gt;&amp;nbsp;&lt;/p&gt;
        &lt;p&gt;Section one text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="sectionfour"&gt;
        &lt;p&gt;&amp;nbsp;&lt;/p&gt;
        &lt;p&gt;&amp;nbsp;&lt;/p&gt;
        &lt;p&gt;Section two text&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the CSS: </p>
  
  <pre><code>@charset "utf-8";
  #header {
      height: 100px;
      width: 1200px;
      background-repeat: no-repeat;
      background-color: #000;
  }
  #logotop {
      height: 100px;
      width: 200px;
      color: #FFF;
      text-align: center;
      padding-left: 200px;
  }
  
  #nav {
      float: right;
      height: 100px;
      width: 800px;
      font-family: "Arial Black", Gadget, sans-serif;
      color: #FFF;
      text-align: center;
  }
  #middletop {
      height: 400px;
      width: 1200px;
      background-color: #000;
      font-family: "Arial Black", Gadget, sans-serif;
      color: #FFF;
      text-align: center;
      font-size: 36px;
      /* [disabled]margin-top: 3px; */
  }
  #logobottom {
      height: 100px;
      width: 200px;
      padding-left: 200px;
  }
  #middle {
      height: 50px;
      width: 1200px;
      background-image: url(../Images/images/images/backgrounds_02.png);
      background-repeat: no-repeat;
      color: #000;
  }
  #facebook {
      font-family: "Arial Black", Gadget, sans-serif;
      color: #000;
      text-align: center;
      height: 50px;
      width: 550px;
  }
  #twitter {
      font-family: "Arial Black", Gadget, sans-serif;
      color: #000;
      text-align: center;
      float: right;
      height: 50px;
      width: 550px;
  }
  #middlebottom {
      font-family: "Arial Black", Gadget, sans-serif;
      color: #000;
      height: 225px;
      width: 1200px;
      background-image: url(../Images/images/images/backgrounds_03.png);
  }
  #sectionone {
      font-family: Arial, Helvetica, sans-serif;
      color: #000;
      float: left;
      height: 225px;
      width: 600px;
      text-align: center;
  }
  #sectiontwo {
      font-family: Arial, Helvetica, sans-serif;
      color: #000;
      text-align: center;
      height: 225px;
      width: 600px;
      float: right;
  }
  #bottom {
      height: 225px;
      width: 1200px;
      background-image: url(../Images/images/images/ParanormalWebsiteTempV2_04.png);
      background-repeat: no-repeat;
  }
  #sectionthree {
      font-family: Arial, Helvetica, sans-serif;
      color: #000;
      text-align: center;
      height: 225px;
      width: 600px;
      float: left;
  }
  #sectionfour {
      font-family: Arial, Helvetica, sans-serif;
      color: #000;
      text-align: center;
      float: right;
      height: 225px;
      width: 600px;
  }
  #container {
      height: 1050px;
      width: 1200px;
      text-align: center;
  }
  </code></pre>
  
  <p>Thanks in advance to anyone that can help me :) </p>