title: Bootstrap Nav Bar Resize
body: <p>I'm using bootstrap to build a simple website but I'm having some trouble with the height of the navbar. So the nav bar looks fine when the titles aren't too long like this:<br>
  <img src="https://i.stack.imgur.com/EuFMe.jpg" alt="enter image description here"></p>
  
  <p>However, if one of the link name's gets too long then the nav bar looks like this:<br>
  <img src="https://i.stack.imgur.com/5pRIa.jpg" alt="enter image description here"></p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="masthead"&gt;
          &lt;div class="navbar"&gt;
              &lt;div class="navbar-inner"&gt;                    
                  &lt;ul class="nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="../Home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../About.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../Officers.html"&gt;Officers&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../Join.html"&gt;Join&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../Calendar.html"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../Contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../WSP.html"&gt;Wsdf asdkfjlaksjdf laksjdflkjasdf&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../Members.html"&gt;Members&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;                    
              &lt;/div&gt;&lt;!-- /.navbar-inner --&gt;
          &lt;/div&gt;&lt;!-- /.navbar --&gt;
      &lt;/div&gt;&lt;!-- /.masthead --&gt;
  &lt;/div&gt;&lt;!-- /.container --&gt;
  </code></pre>
  
  <p>My CSS looks like this:</p>
  
  <pre><code>/* Customize the navbar links to be fill the entire space of the .navbar */
  .navbar .navbar-inner {
      padding: 0;
  }
  .navbar .nav {
      margin: 0;
      display: table;
      width: 100%;
  }
  .navbar .nav li {
      display: table-cell;
      width: 1%;
      float: none;
  }
  .navbar .nav li a {
      font-weight: bold;
      text-align: center;
      border-left: 1px solid rgba(255,255,255,.75);
      border-right: 1px solid rgba(0,0,0,.1);
  }
  .navbar .nav li:first-child a {
      border-left: 0;
      border-radius: 3px 0 0 3px;
  }
  .navbar .nav li:last-child a {
      border-right: 0;
      border-radius: 0 3px 3px 0;
  }
  </code></pre>
  
  <p>How do I adjust my CSS code to make the navbar graphics adjust properly?</p>