title: My Navigation bar shorten's when the screen size or resolution goes small?
body: <p>i having problem with my navigation bar... its perfectly fits at the center or i could say its size it fits on my browser screen but when i open my page to another desktop computer with different size ... it shortens itself and goes to the next line.</p>
  
  <h2>its shows like this see (EXAMPLE)</h2>
  
  <p>HOME||CONTACT US||USER PAGE||||CONTACT US||USER PAGE||<br>
  ||CONTACT US||USER PAGE||</p>
  
  <hr>
  
  <p><strong>its not working on other computer display screens smaller than mine and then goes down to next line as shown above.
  i want navigation bar to be fit or resize its when it's open one other computer screen smaller than mine.
  it should fit on my screen or other smaller pc screen as it shown on mine. like it automatically make itself(nav bar) small on smaller screen and fit on bigger screen pc brower.</strong></p>
  
  <p>Here is my code (HTML)Eg:-</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href=#&gt;HOME&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href=#&gt;ABOUT US&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href=#&gt;About 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=#&gt;About 2&lt;/a&gt;&lt;/li&gt;
  
  
  &lt;li&gt;&lt;a href=#&gt;student &lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href=#&gt;EX1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=#&gt;Ex2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=#&gt;ex3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href=#&gt;Student 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=#&gt;Student 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>my CSS code</p>
  
  <pre><code>ul {
    list-style: none;
    padding:0;
    margin: 0;
    background: #151B54;
  
  }
  
  
  ul li {
  
   display: block; 
    position: relative;
  font-weight:bold;
    float:left;
    background: #151B54;
  padding:0px;
  margin:0;
  float:left;
  
  
  }
  
  
  
  
  li ul { display: none; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
  
  ul li a {
  margin:0px;
    display: block;
  
  text-align:left;
    padding: 10px;
    text-decoration: none;
    white-space: nowrap;
    color: white;  
    font-size: 14.1px;
  
  }
  
  ul li a:hover { background: black; }
  
  
  
  
  li:hover &gt; ul {
    display: block;
    position: absolute;
  
  
  }
  
  li:hover li { float: none; }
  
  li:hover a { background:#151B54; }
  
  li:hover li a:hover { background:black; }
  
  
  
  ul ul ul {
    left: 100%;
    top: 0;
  
  
  }
  
  
  
  ul:before,
  ul:after {
  
    content: " "; /* 1 */
    display: table; /* 2 */
  }
  
  ul:after { clear: both; }
  </code></pre>
  
  <p>also i added a div outside of my code</p>
  
  <pre><code>&lt;div id="main" style="width:81%;padding-top:0;bottom:0;padding-left:10%;padding-right:20%;height:100%;"&gt;
  </code></pre>