title: Why do I have extra white space on the left side of my page below the logo?
body: <p>I'm trying to figure out how to stretch the border of a div containing a three-column layout across the page. It stretches to the right correctly, but is not correct on the left side. Can anyone shoot me some pointers?</p>
  
  <p>As a side question, is this why the third column in my content-container div is not editable? I cannot seem to change the formatting on the third column of this layout for some reason, and I think its related to the first problem. </p>
  
  <p>I checked the width tag and it seems to be set to auto. </p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="wrapper"&gt;
  &lt;div id="logo"&gt;
  &lt;p align="left"&gt;&lt;img src="assets/virael-logo.jpg" alt="logo"/&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="menu"&gt;
  &lt;ul&gt;&lt;p align="right"&gt;
  &lt;li&gt;&lt;a class="button" href="..//FinalProject/playerprofiles.html"&gt;Media&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="button" href="..//FinalProject/Tourneyschedule.html"&gt;Resources&lt;/a&gt;&lt;/li&gt;      
  &lt;li&gt;&lt;a class="button" href="..//FinalProject/Tourneyschedule.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;/ul&gt;
  &lt;p&gt;
  &lt;/p&gt;
  &lt;div id="content-container"&gt;
  &lt;div id="section-navigation"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Chapter 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Chapter 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Chapter 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Chapter 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
  &lt;h2&gt;
  Introduction to New Media
  &lt;/h2&gt;
  &lt;p&gt;
  Lorem ipsum dolor sit amet consect ...
  &lt;/p&gt;
  &lt;p&gt;
  Ut wisi enim ad minim veniam, ...
  &lt;/p&gt;
  &lt;p&gt;
  Duis autem vel ... 
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="aside"&gt;
  &lt;h3&gt;
  Glossary
  &lt;/h3&gt;
  &lt;p&gt;
  Critical Theory, Continental Philosophy, Horkheimer,
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!--This is the Footer--&gt;
  &lt;!--This is the end tag for wrapper div--&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;  
  </code></pre>
  
  <p>AND THE CSS SHEET</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  &lt;style type="text/css"&gt;
  }
  * {
  margin: 0;
  }
  html, body {
  margin:0;
  padding:0;
  height:100%;
  width: auto;
  }
  
  #header {
  padding:10px;
  background:#5ee;
  }
  
  #content-container
  {
  clear: left;
  width: 1024px;
  background: white; 
  }
  
  #section-navigation
  {
  float: left;
  width: 0;
  padding: 40px 0px;
  margin: 20px 0px;
  display: inline;
  }
  
  #section-navigation ul
  {
  margin: 0px;
  }
  #section-navigation ul li
  {
  margin: 0px 0px 0px;
  padding: 0px;
  list-style-type: none;
  }
  #content {
  font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Arial,     sans-serif;
  margin: 0 0 0 85px;
  display:inline-block;
  padding-top: 30px;
  padding-bottom: 30px;   /* Height of the footer element */
  padding-left: 165px;
  padding-right: 430px;
  position: absolute;
  top: 100px;
  text-align: justify;
  width: auto;
  border-top: 7px solid black;
  border-left: none;
  border-right: none;
  border-bottom: 7px solid black;
  overflow: auto;
  }
  
  #content h2 { margin: 0;
  font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'Myriad Pro', Arial, sans-serif;  }
  
  #aside
  {
  font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Arial, sans-serif;   
  float: right;
  width: 50px;
  padding: 50px 0;
  margin: 0 20px 0 0;
  display: inline;
  }
  
  #aside h3 { margin: 0; }
  
  #logo{
  background-repeat: no-repeat;
  background-position: right top;
  margin-left: auto;
  margin-right: auto;
  float: left;
  margin: 0px 30px 0px 25px;
  overflow: hidden;
  
  }
  
  #logo2{
  visibility: hidden;
  margin: 0px 30px 0px 25px;
  float: left;
  
  }
  
  #menu {
  margin-left: auto;
  margin-right: auto;
  float: both; 
  overflow: hidden;
  
  }
  
  ul {
  float: left;
  list-style-type:none;
  text-align:center;
  margin: 0;
  padding: 0;
  }
  
  li {
  display: inline-block;
  text-align: center;
  }
  
  a:link, a:visited {
  font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'Myriad Pro', Arial, sans-serif;
  display: block;
  font-size: 18pt;
  font-weight: bold;
  width: 256px;
  color: black;
  background-color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  text-transform: capitalize;
  }
  
  a:hover, a:active {
  color: purple;
  }
  
  .content {
  width:960px;
  background: #F0F0F0;
  border: 1px solid #CCC;
  height: auto;
  margin: 70px auto;
  overflow: scroll;
  }
  
  #footer {
  margin-left: auto;
  margin-right: auto;
  float: both;
  }
  
  #footer_menu {
  margin-left: auto;
  margin-right: auto;
  float: left; 
  overflow: hidden;
  
  .wrapper {
  min-height: 100%;
  height: auto;
  height: 100%;
  margin: 0 auto -345px;
  }
  
  .footer, .push {
  height: 345px;
  }
  
  #footer {
  text-align: center;
  text-transform: capitalize;
  background: black;
  line-height: 100px;
  color: #FFFFFF;
  } 
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  </code></pre>