title: navigation throws image off center
body: <p>I've been working on this for a while and can't seem to solve the problem myself or find an answer anywhere. </p>
  
  <p>Basically whats happening is, I have a vertical Navigation bar all the way to the left of my image so instead of the image being centered from the completely left side of the browser window to the right side, It gets centered from the right side of the navigation bar to the right side of the browser window. This throws it off with my title "desertshore" and my page content, which are both actually centered.</p>
  
  <p>Is there a way that I can make it see  pass the Nav bar and center itself around the browser window?</p>
  
  <p>here is the code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;dir&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  body {
  font-family: "Arial", "Helvetica", "Helvetica Neue";
  font-size: 14px;
  background-image: url('.jpg');
  background-position:center;
  background-size:50em;
  background-repeat:no-repeat;
  margin: 30px 0px 0 0;
  text-align: left;
  color: #333;
  }
  title {
  font-family: "Arial", "Helvetica", "Helvetica Neue";
  font-size: 14px;
  background-image: url('.jpg');
  background-position:center;
  background-size:50em;
  background-repeat:no-repeat;
  margin: 30px 0px 0 0;
  text-align: left;
  color: #333;
  }
  div#container {
  width:100px;
  background:#FFF;
  height:auto;
  overflow:auto;  
  border: 1px solid black;
  border-left:0;
  float:left;
  
  }
  
  div#site_title {
  color:#00ffff;
  text-transform: lowercase;
  font-weight: ;
  font-size: 35px;
  line-height: 15px;
  margin: 0 0 0 0px;
  }
  
  div#site_title2 {
  color:#00ffff;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 17px;
  line-height: 15px;
  margin: 0 0 0 0px;
  }
  
  
  #menu ul{
  list-style-type: none;
  padding: 0;
  margin-left: 0;
  }
  
  div#menu li a
  {
  background:#fff
  border:1px solid #fff;
  margin: 0;
  padding: 0;
  display: block; 
  }
  
  
  -googlechromefix-
  div#menu li:hover a {
  background:#00ffff;
  color:#FFFFFF;
  border:1px solid #fff;
  margin: 0;
  padding: 0;
  display: block;
  
  }
  div#menu ul a
  {
  text-decoration: none;
  color: #333;
  }
  div#menu ul a:hover
  {
  background:#00ffff;
  color:#FFFFFF;
  font-weight:bold
  }
  
  
  
  
  
  div#page_content {
  font-family: "Arial", "Helvetica", "Helvetica Neue";
  font-size: 14px;
  margin: 30px 0px 0 0;
  text-align: left;
  color: #333;
  }
  .color01 {
  color: 
  }
  #desertshoredom2 {
  display:  block;  
  margin-left: auto;   
  margin-right: auto;
  text-align: center;
  border: 1px solid red;
  }
  
  div#container2 {
  display: block;   
  margin-left: auto;   
  margin-right: auto;
  text-align: center;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="site_title"&gt;
  &lt;center&gt;&lt;span&gt; &amp;#x25B3;&amp;#x25B2;desertshore&amp;#x25B2;&amp;#x25B3;&lt;/span&gt;&lt;/center&gt;
  &lt;div id="site_title2"&gt;
  &lt;span&gt;directory&lt;/span&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="container"&gt;
  &lt;div id="menu"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="happyanniversary"&gt;&lt;span class="color01"&gt;Happy Anniversary&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
      &lt;p&gt;&lt;li&gt;&lt;a href="downloads"&gt;&lt;span class="color01"&gt;Downloads&lt;/span&gt;&lt;/a&gt;&lt;/li &lt;/p&gt;
      &lt;p&gt;&lt;li&gt;&lt;a href="about"&gt;&lt;span class="color01"&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/p&gt;
      &lt;p&gt;&lt;li&gt;&lt;a href="ask"&gt;&lt;span class="color01"&gt;Ask&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/p&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;p&gt;&lt;img id="desertshoredom2" src="desertshoredom2.jpg"/&gt;&lt;/p&gt;
  
  &lt;div id="container2"&gt;
  &lt;h1&gt;+++test+++ Test +++test+++&lt;/h1&gt;
  &lt;p&gt; idreamed idreamed&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks a lot for helping me, This seems like something really simple that I'm not doing, however my experience in HTML/CSS is extremely elementary.</p>
  
  <p></p>