title: Extra White Space On the Left Side of the Screen
body: <p>Even though I have removed the padding and the margin for the lower_content div, I'm still getting this thin white space on the left side of screen...It's like there's an invisible margin that I just can't find anywhere.  MY content reaches the right side of the screen just fine, but not the left.</p>
  
  <p>Please, help me find the problem...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang = "en"&gt;
  &lt;head&gt;
      &lt;title&gt;My name here&lt;/title&gt;
          &lt;meta charset="utf-8"/&gt;
          &lt;link rel="stylesheet" href="styleForFullPage.css" type="text/css" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  
      &lt;div class="side_banner"&gt;
          &lt;nav&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#" &gt;HOME&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="about_me_FP.html" &gt;ABOUT ME&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="portfolio_FP.html" &gt;PORTFOLIO&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact_me_FP.html" &gt;CONTACT&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;hr/&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  
      &lt;div class="name_div"&gt;
          &lt;h1&gt;My name here&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div class="lower_content"&gt;
          &lt;p&gt;LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
  LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
  LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
  LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
  LOWER CONTENT! LOWER CONTENT! 
              &lt;br/&gt;
      LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
  LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
  LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
  LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
  LOWER CONTENT! LOWER CONTENT! 
          &lt;br/&gt;
              LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
  LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
  LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
  LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
  LOWER CONTENT! LOWER CONTENT! 
          &lt;/p&gt;
      &lt;/div&gt;  
  
  
  &lt;/html&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@font-face {
          font-family: comfortaa;
          src: url(Comfortaa-Regular.ttf);
      }
  
  
  html { 
    background: url(meAndTheOcean.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;
  }
  
  
  
  .side_banner{
      /*font-family: Tahoma, Verdana, Segoe, sans-serif;*/
      font-family: comfortaa;
  
      font-size: 18px;
      font-style: normal;
      font-variant: normal;
      font-weight: 500;
      line-height: 26.3999996185303px;
  
      background-color:transparent;
  
  
      float:left;
      height:100%;
      width: 150px;
      margin: 0% 2% 2% 0%;
  }
  
  
  .side_banner nav ul{
      width: 100%;
      list-style: none;
      list-style-type:none;
      padding: 0;
  
  
  }
  
  
  
  .side_banner nav ul li{
  
  }
  .side_banner nav a:link, .side_banner nav a:visited{
      color: white;
      display:block;
      text-decoration: none;
      /*padding: 10px 25px;*/
      padding: 10px;
  }
  
  .side_banner nav a:hover, .side_banner nav a:active, .side_banner nav .active a:link,
  .side_banner nav .active a:visited{
      text-decoration: none;
      background-color: orange;
      /*background-color: 1C6BA0;*/
      text-shadow: none;
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
  
  }
  
  .main_content{
      float: left;
      margin: 1% 2% 2% 2% ;
      width: 70%;
      font-family: Tahoma, Verdana, Segoe, sans-serif;
      color:white;
  
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
  
  }
  
  .name_div{
      font-family:comfortaa;
      color: white;
  
      text-align: center;
  
      width: 300px;
      height:200px;
  
      position:absolute;
      left:50%;
      top:50%;
      margin:-110px 0 0 -150px;
  }
  
  .lower_content{
      overflow: auto;
      position: absolute;
      top: 650px;
      width:100%;
  
      background-color:white;
  
      overflow-x:hidden;
  
  
      color:black;
      font-size:20;
  
      margin: 0% 0% 0% 0% ;
      padding: 0;
  
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
  
  }
  </code></pre>