title: How to get the navigation bar to stretch across the entire width of page HTML CSS
body: <p>I'm trying to create a website and I'm having trouble trying to get the menu bar to stretch across the width of the web page. Can somebody please help?
  Here is my CSS/HTML for the menubar:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
      list-style-type: none;
      margin: 0px;
      padding-left: 2px;
      position: fixed;
      top: 0px;
      word-spacing: 2px;
  }
  li { 
      float: left;
      display: inline;
      word-spacing: 2px;
      padding-left: 70px;
      background-color: #610000;
  }
  #menubar a{
      display: inline;
      text-align: center;
      text-decoration: none;
      font-size: 15px;
      font-family: PT sans, sans-serif;
      color: #FFDFC1;
      padding-left:0px; 
  }
  
  
  #menubar a:hover {
      color: #092601;
      background-color:#610000;
  }
  #menubar .active{
      color: #092601;
  }
  
  body{
      background-color: #ffffff;
      margin-left: 350px;  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menubar"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="menu.html"&gt;Menu&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="location.html"&gt;Location&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>