title: Navbar is not filling screen width properly
body: <p>So, I'm making a navbar for my website, but the problem is, I can't seem to make it fit the entire screen width. (Note: still working on the bar so if there's any useless code please do your best to ignore it :P)</p>
  
  <p>When I do auto width (on padding-left) it fills only a small portion of the screen, but when I do 100% width, it doesn't show the actual buttons.  I can do px or em because it messes up with different screen sizes.</p>
  
  <p>Any help at all would be great, thanks!</p>
  
  <p>HTML- ` </p>
  
  <pre><code>&lt;ul class="menu"&gt;  
  &lt;li class="menu"&gt;&lt;a href="/wordpress/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/wordpress/"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/wordpress/"&gt;Blog&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/wordpress/"&gt;Services&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/wordpress/"&gt;Portfolio&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt;&lt;a href="/wordpress/"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>  </p>
  
  <hr>
  
  <p>CSS-</p>
  
  <pre><code>                 ul.menu a {  
      display: inline-block;  
      padding: 0 30px;
      border-left: 0px solid rgba(255,255,255,0.1);  
      border-right: 0px solid rgba(0,0,0,0.1);  
      text-align: center;  
      line-height: 50px;  
      background-image: linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
      background-image: -o-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
      background-image: -moz-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
      background-image: -webkit-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
      background-image: -ms-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
  
      -webkit-transition-property: c0c0c0;  
      -webkit-transition-duration: 300ms;  
      -moz-transition-property: c0c0c0;  
      -moz-transition-duration: 300ms;
      margin-top: -8.3em;
      position: fixed;
      }   
  
  }  
  
  ul {  
      margin-left: -18px;  
      padding: 0;
      position: fixed;
      width: 100%;
  
  
  }  
  
  ul.menu {  
      height: 30px;  
      border-left: 0px solid ;  
      border-right: 0px solid ;
      float:left; 
  
  
      padding:0;
  }  
  
  ul.menu li {  
      display:inline-block;
      list-style: none;
      float:left;  
      height: 30px;  
      text-align: center;  
  
      }  
  
  
  
  ul li a:hover {  
      background: #000000;  
  }  
  </code></pre>