title: Logo won't move left or right inside header tag
body: <p>I'm trying to put my logo in the center or my page (center of header &amp; above menu nav) It moves away from the menu but doesn't move laterally left or right just stays in the same position no matter what.</p>
  
  <p>I've tried everything searching google and no results show up.Tried making header relative and tried making menu relative.
  Here's my code.</p>
  
  <pre><code>body {
  width: 800px;
  margin: 100px auto 0 auto;
  background: darkgrey;
  font-family: arial;
  display: block;
  }
  
  #header {
  width: 800;
  height: auto;
  margin: 0;
  background: transparent;
  }
  
  #h1.logo {
  position: absolute;
  right: 50px;
  }
  
  #tabs{
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  #content
  {
      background: #fff;
      padding: 2em;
      height: 520px;
      position: relative;
      z-index: 2;
      border-radius: 0 5px 5px 5px;
      box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
  }
  
  #tab2 {
    position: relative;
  }
  
  #icons img {
    padding-right:5px;
    0% { /* space between content and footer*/
      position: absolute;
      top: 20;
      right: 50px;
    }
  
  }
  footer {
    display: inline-block;
          width:800px;
          text-align: left;
          margin-top: 250px;
  
  }
  
  footer ul {list-style-type: none;
  text-align: center;
  float: left;
  }
  
  footer li {display:inline;
  }
  
  footer a:link{
    text-decoration: none;
  }
  
  footer p {
   float:right;
  }
  
  table {border: solid darkgrey thin;
  position: relative; 
  left: -100px;
  z-index: 2;
  
  &lt;body&gt;
  
  &lt;header&gt;
  &lt;h1 class="logo"&gt;
  &lt;img src="images/Logodraft.png" alt="Kieron's Logo" title="Kieron's Logo" /&gt;
  &lt;/h1&gt;
  &lt;/header&gt;
  
  &lt;!--navigation starts here--&gt;
  
  &lt;!--An unordered list that holds the tab navigation items--&gt;
  &lt;ul id="tabs"&gt;
  &lt;li&gt;&lt;a href="index.html" title="tab1"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="about.html" title="tab2"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="portfolio.html" title="tab3"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="blog.html" title="tab4"&gt;Blog&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!--A wrapper for each tab content--&gt;
  
  &lt;div id="content"&gt;
  &lt;/div&gt;
  &lt;!--end  content div--&gt;
  
  &lt;footer&gt; &lt;!--footer starts here--&gt;
  
    &lt;div id="tab3"&gt;
  
   &lt;table border="0" width=1024px height=0px&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;a href="index.html"&gt;&lt;img src="images/logoicon.png"/&gt;&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="index.html"&gt;Home | &lt;/a&gt; &lt;a href="about.html"&gt;About | &lt;/a&gt; &lt;a href="portfolio.html"&gt;Portfolio | &lt;/a&gt; &lt;a href="blog.html"&gt;Blog&lt;/a&gt;&lt;/td&gt;
      &lt;td align="right"&gt;&lt;small&gt;&amp;copy;copyright 2016 Kieron Roberts&lt;/small&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
    &lt;/div&gt;    
  
  
  &lt;/footer&gt; &lt;!--end of footer--&gt;
  
  &lt;/body&gt;
  </code></pre>