title: CSS content and menu positioning
body: <p><a href="http://postimg.org/image/sadzaa0up/" rel="nofollow">http://postimg.org/image/sadzaa0up/</a></p>
  
  <p>I'm trying to get the JS navigation buttons to fall inline with a full width background/box so the buttons aren't just floating. When I try to set this in the CSS I find the buttons aren't in line with this background/box/container. They sit slightly above it. I've tried altering margins etc but had no luck.</p>
  
  <p>I'm not sure if the issue is related but I'm finding I can't position the nav bar directly beneath the logo container/header. It's being pushed so it's a 150px or so below the logo with a big gap between.</p>
  
  <p>Then finally, the main body content area won't stretch to the width on the left side. I've sorted the right side using margins, yet the left side won't get rid of the gap.</p>
  
  <p>Any help on this is greatly appreciated.
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("nav01").innerHTML =
    "&lt;ul id='menu'&gt;" +
    "&lt;li&gt;&lt;a href='Index.html'&gt;HOME&lt;/a&gt;&lt;/li&gt;" +
    "&lt;li&gt;&lt;a href='Customers.html'&gt;SECTIONS&lt;/a&gt;&lt;/li&gt;" +
    "&lt;li&gt;&lt;a href='About.html'&gt;HOWS&lt;/a&gt;&lt;/li&gt;" +
    "&lt;li&gt;&lt;a href='About.html'&gt;OUR EXPERIENCE&lt;/a&gt;&lt;/li&gt;" +
    "&lt;li&gt;&lt;a href='About.html'&gt;TESTIMONIALS&lt;/a&gt;&lt;/li&gt;" +
    "&lt;li&gt;&lt;a href='About.html'&gt;NEWS&lt;/a&gt;&lt;/li&gt;" +
    "&lt;li&gt;&lt;a href='About.html'&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;" +
    "&lt;/ul&gt;";
  
  document.getElementById("foot01").innerHTML =
    "&lt;p&gt;&amp;copy; lumi " + new Date().getFullYear() + " All rights reserved.&lt;/p&gt;";</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Check how to edit nav main background colour */
  
  #container {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #73008C;
    background-image: url("banner.jpg");
    background-size: 100%;
    width: 100%;
    height: 800px;
    content: 60px padding: 5px;
    border: 5px #73008C;
    margin-left: 0px;
    margin-right: 0px;
    z-index: -2;
  }
  #header {
    position: absolute;
    opacity: 0.6;
    background-color: #ffffff;
    width: 100%;
    height: 90px;
    margin: auto;
    z-index: -1;
  }
  #logo {
    position: center top;
    margin: 0;
    z-index: 2;
  }
  ul#menu {
    width: 100%;
    height: 50px;
    padding: 0px;
    border: 0px;
    border-color: #374754;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
  }
  ul#menu {
    position: relative;
    background-color: #374754;
    padding: 0;
    margin-top: 70px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
  }
  ul#menu li {
    display: inline;
    margin-right: 5px;
  }
  ul#menu li a {
    background-color: #374754;
    padding: 10px 10px;
    text-decoration: none;
    color: #ffffff;
    border-radius: 4px 4px 4px 4px;
  }
  ul#menu li a:hover {
    color: white;
    font-style: bold;
    background-color: #d83030;
  }
  body {
    font-family: "Helvetica", Verdana, sans-serif;
    font-size: 12px;
    background-color: #ffffff;
    color: #ffffff;
    text-align: center;
    padding: 0px;
  }
  #main {
    position: absolute;
    top: 600px;
    padding: 10px;
    padding-left: 200px;
    padding-right: 200px;
    background-color: #d83030;
    background-position: top center;
    margin: auto;
  }
  #h1 {
    text-shadow: 5px 5px 5px ##374754;
    font-family: Helvetica, sans-serif;
    color: #ffffff;
    text-align: center;
    font-size: 24px;
  }
  #footer {
    position: relative;
    color: #ffffff;
    margin-bottom: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;LOREM IPSUM&lt;/title&gt;
    &lt;link href="Site.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div id="container"&gt;
  
      &lt;div id="header"&gt;&lt;/div&gt;
  
      &lt;div id="logo"&gt;
  
        &lt;img src="logo.png" alt="CROWD" style="width: 305px; height125px"&gt;
  
      &lt;/div&gt;
  
      &lt;nav id="nav01"&gt;&lt;/nav&gt;
  
    &lt;/div&gt;
  
    &lt;link href="Site.css" rel="stylesheet"&gt;
  
    &lt;div id="main"&gt;
  
      &lt;h1&gt;Welcome to LOREM&lt;/h1&gt;
      &lt;h2&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est dui, aliquam non auctor eget, maximus eu ligula. Ut sed iaculis elit, ac pharetra sem. Nam ipsum sem, consectetur id bibendum vitae, faucibus at tellus. Mauris aliquam, justo efficitur luctus vehicula, velit arcu efficitur nunc, eu volutpat diam erat ut eros. Vestibulum nec mi tristique, blandit eros sit amet, porttitor urna. Ut vehicula elit ipsum, a rhoncus erat fermentum sed. Suspendisse non diam at ex tincidunt pharetra eu id sem.&lt;/h2&gt;
  
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;content&lt;/p&gt;
      &lt;p&gt;more content&lt;/p&gt;
      &lt;p&gt;data (more content)&lt;/p&gt;
  
      &lt;footer id="foot01"&gt;&lt;/footer&gt;
  
    &lt;/div&gt;
  
  
    &lt;script src="Script.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>