title: Centering The Page
body: <p>I am having trouble trying to center everything on the page. I know I have positioned certain items on the page down from top and in from left, is there any possible way to still center with these settings on. If i take top and left options off the menu boxes seem to alight themselves down the center of the page vertically but I need them to stay horizontal.</p>
  
  <p>HTML:
      </p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;div class="social1"&gt;
  &lt;a href="https://www.facebook.com/pages/Scottish-Game-Jam/136412446403315"&gt;&lt;img         src="images/faccebook.jpg" width="32" height="32" alt="image" &gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="social2"&gt;
  &lt;a href="https://twitter.com/ScottishGameJam"&gt;&lt;img src="images/Twitter.jpg" width="32" height="32" alt="image"&gt; &lt;/a&gt;&lt;/div&gt;
  
  
  
  &lt;div class="logo"&gt;
  &lt;img  src="Untitled-2.png" alt="Logo" width="120"px" length="120px" &gt;&lt;/div&gt;
  
  
  &lt;div class="container2"&gt;
  
  &lt;div id="demo"&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="GameJamHomepage.html"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="Registration.html"&gt;&lt;span&gt;Register&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="Gallery.html"&gt;&lt;span&gt;Gallery&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="Location.html"&gt;&lt;span&gt;Location&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  
  
  
  
  &lt;div id="demo2"&gt;
  &lt;nav&gt;
     &lt;ul&gt;
         &lt;li&gt;&lt;a href="News.html"&gt;&lt;span&gt;News&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="Supporters.html"&gt;&lt;span&gt;Support&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="FAQ.html"&gt;&lt;span&gt;FAQ&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="ContactUs.html"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.social1 { position:absolute;
  top:5px;
  left: 30px;}
  
  .social1 a:hover {display:block;  width:32; length:32; color: #F0C;} 
  
  .social2 { position:absolute;
  top:5px;
  left: 70px;}
  
  .social2 a:hover {display:block;  width:32; length:32; color: #F0C;} 
  
  
  .logo {position:absolute;
  top:50px;
  left:30px;}
  
  body{
  background-color: #000;
  text-align: center;}
  
  #container {position:absolute; margin:auto;
  text-align:left;
  width:450px;}
  
  
  
  #container2 { position:absolute;}
  
  
  
  
  #demo nav ul li a {display: block; width: 120px; height: 120px;
  background-image: url(icons.png); background-repeat: no-repeat;}
  
  #demo nav ul li:nth-child(1) a {
  background-color: #5bb2fc;
  position:absolute;
  top:190px;
  left:30px;}
  
  #demo nav ul li:nth-child(2) a {
  background-color: #58ebd3;
  position:absolute;
  top:190px; left:160px;}
  
  #demo nav ul li:nth-child(3) a {
  background-color: #ffa659;
  position:absolute;
  top:190px;
  left: 290px;    }
  
  #demo nav ul li:nth-child(4) a {
  background-color: #ff7a85;
  position:absolute;
  top:190px;
  left: 420px;    }
  
  #demo2 nav ul li a {display: block; width: 120px; height: 120px;
          background-image: url(icons.png); background-repeat: no-repeat; }
  
  #demo2 nav ul li:nth-child(1) a {background-color: #5bb2fc;
              position:absolute;top:320px;left:30px;}
  
  #demo2 nav ul li:nth-child(2) a {
              background-color: #58ebd3;
              position:absolute;
  top:320px;
  left:160px;
          }
  #demo2 nav ul li:nth-child(3) a {
              background-color: #ffa659;
              position:absolute;top:320px;left:290px;         }
  
  #demo2 nav ul li:nth-child(4) a {background-color: #ff7a85;
              position:absolute;top:320px;left:420px; }
  
  
  nav ul li a span {font: 50px "Dosis", sans-serif; text-transform: uppercase;position: fixed;                 left:600px; top: 190px;    display: none;  }
  
  #demo nav ul li a:hover { display:block; height:120px;
  width:120px;
  background-color:#3333CC;}
  
  
  
  #demo2 nav ul li a:hover { display:block; height:120px;
  width:120px;background-color:#3333CC }
  
  nav ul li a:hover span {display: block;}
  
  nav ul li:nth-child(1) a span { color: #5bb2fc;                 }
  
  nav ul li:nth-child(2) a span { color: #58ebd3;         }
  
  nav ul li:nth-child(3) a span {color: #ffa659;}
  
  nav ul li:nth-child(4) a span {
                  color: #ff7a85;}
  </code></pre>