title: why doesn't my navbar bar extent to 100% despite width 100%
body: <p>I have created a navbar that i wish to make it 100%.</p>
  
  <p>Here is my HTML code for better clarity</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head id="Head1" runat="server"&gt;
  
  &lt;title&gt;iPolice&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; 
  &lt;asp:ContentPlaceHolder ID="head" runat="server" &gt;
  &lt;/asp:ContentPlaceHolder&gt;
  &lt;link rel="stylesheet" href="css/style.css" type="text/css" /&gt;
  
  
  &lt;ul id="nav" &gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Department&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="Login.aspx"&gt;Login&lt;/a&gt;&lt;/li&gt; 
  &lt;/ul&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>However, despite putting width:100%; It still remain the same. </p>
  
  <p><img src="https://i.stack.imgur.com/FkmUl.png" alt="enter image description here"></p>
  
  <p>I was hoping that all my 5 choices will be centered and divided evenly like this. However, i'm not even able to do it without my width being 100%.</p>
  
  <p><img src="https://i.stack.imgur.com/jp4vL.png" alt="enter image description here"></p>
  
  <p>This is the CSS of my navbar</p>
  
  <pre><code>#nav {
   position:absolute;
   left:0%;
   top:0%;
   margin: 0px; 
   padding: 0;
   border: 1px yellow;
   border-bottom: none;
   width:100%;
  }
  
  #nav li a, #nav li {
   text-align: center;
      float: left;
  }
  
  #nav li {
   list-style: none;
   position: relative;
  }
  
  #nav li a {
   padding: 1em 2em;
   text-decoration: none;
   color: #5FFB17;
   background: #292929;
   background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
   background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
   border-right: 1px solid #3c3c3c;
   border-left: 1px solid #292929;
   border-bottom: 1px solid #232323;
   border-top: 1px solid #545454;
  }
  
  #nav li a:hover {
   background: #2a0d65;
   background: -moz-linear-gradient(top, #11032e, #2a0d65);
   background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
  }
  </code></pre>
  
  <p>I also have tried to change the #navbar's position to relative. However, the navbar's left, top position wont be 0% as what my code written. I cant really see anything that is holding my navbar from becoming 100%.</p>
  
  <p><img src="https://i.stack.imgur.com/2zQof.png" alt="enter image description here"></p>
  
  <p>I have also tried nesting my navbar in a different CSS attributes with width as 100% as well</p>
  
  <pre><code>&lt;div id="navbarwidth"&gt;
  &lt;ul id="nav" &gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Department&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="Login.aspx"&gt;Login&lt;/a&gt;&lt;/li&gt; 
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#navbarwidth {
  width:100%;
  position:absolute;
  }
  </code></pre>