title: How to Keep Nav bar from shifting when window resized
body: <p>I am new to html/css. My problem is when I re-size my browser window the text of the nav-bar shifts/condenses according to the size of the window and becomes distorted. I would like it to remain static so that when I narrow my browser window I would have to have to scroll over to the right to be able to see the text again. I'm using bootstrap as well.</p>
  
  <p>This is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="nav"&gt;
      &lt;div class="container"&gt;
        &lt;ul class="pull-right"&gt;
          &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;WINES&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;GRAPES&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.nav li {
    display: inline;
  }
  
  .nav a {
    color: #5a5a5a;
    font-size: 20px;
    font-weight: bold;
    padding: 14px 10px;
  }
  
  .nav {
    position: absolute;
    top: 20px;
    right: 0px;
  }
  </code></pre>
  
  <p>I tried using <code>.container {width: 900px;}</code> but that didn't help. The nav bar still doesn't stay static.</p>