title: How do I make my navigation bar go across the whole screen?
body: <p>I am making a very fancy navigation bar to look like this:
  <img src="https://i.stack.imgur.com/3jy0l.png" alt="enter image description here">
  Here is my css:</p>
  
  <pre><code>.header
  {
  width:100%;
  height:80px;
  background:#939393;
  background:-webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
  background:-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
  border-top:1px solid #939393;
  position:relative;
  margin-bottom:30px;
  
  }
  body
  {
  margin:0;
  }
  ul 
  {
  margin:0;
  padding:0;
  }
  
  ul.menu 
  {
  height:80px;
  border-left:1px solid rgba(0,0,0,0.3);
  border-right:1px solid rgba(255,255,255,0.3);
  float:left;
  }
  ul.menu li 
  {
  overflow:hidden;
  width:200px;
  list-style: none;
  float:left;
  height:79px;
  text-align:center;
  background:-webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
  background:-moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
  }
  
  ul li a 
  {
  display:block;
  padding:0 20px;
  border-left:1px solid rgba(255,255,255,0.1);
  border-right:1px solid rgba(0,0,0,0.1);
  text-align:center;
  line-height:79px;
  background:-webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
  background:-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
  -webkit-transition-property: background;
  -webkit-transition-duration: 1500ms;
  -moz-transition-property:background;
  -moz-transition-duration:1500ms;
  }
  
  ul li a:hover 
  {
  background:transparent none;
  }
  
  ul li.active a
  {
  background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
  background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
  }
  </code></pre>
  
  <p>And here is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="header"&gt;
      &lt;div class="navbar"&gt;
          &lt;ul class ="menu" rel="sam1"&gt;
              &lt;li class="active"&gt;&lt;a href="Home.htm"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Compare.htm"&gt;Compare Products&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Contact.htm"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Download.htm"&gt;Download&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I want to do is span the whole navigation links across the whole page. I can put each link to 25%, and that works fine, but when I try to set...</p>
  
  <pre><code>ul.menu
  {
  width:100%;
  }
  </code></pre>
  
  <p>It puts a scrollbar at the bottom, and 2 pixels of white at the right edge. Is there anything I can do to remove those?</p>
  
  <p>Hopefully this doesn't sound confusing.</p>