title: Adjusting Bootstrap box widths around links
body: <p>I have a custom nav bar I made using Bootstrap with 3 simple links: Home, Services, and Contact.  As it is right now, the boxes around each link are different sizes because each link contains a different amount of characters, as seen <a href="http://homegrowndevelopment.com/" rel="nofollow">here</a>.  I've been trying to edit my code so all list items have a width of 100px, but nothing changes.  What can I do to make it so all the boxes surrounding my links are the same width.</p>
  
  <p>Here's the HTML for my navigation:</p>
  
  <pre><code>&lt;div id="nav-wrapper"&gt;
  &lt;div id="nav" class="navbar navbar-inverse affix-top center" data-spy="affix"&gt;
    &lt;div class="navbar-inner" data-spy="affix-top"&gt;
      &lt;div class="container"&gt;
  
        &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
        &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/a&gt;
  
        &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
        &lt;div class="nav-collapse collapse"&gt;
          &lt;ul class="nav"&gt;
              &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#service-top"&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact-arrow"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;&lt;!--/.nav--&gt;
        &lt;/div&gt;&lt;!--/.nav-collapse collapse pull-right--&gt;
      &lt;/div&gt;&lt;!--/.container--&gt;
    &lt;/div&gt;&lt;!--/.navbar-inner--&gt;
  &lt;/div&gt;&lt;!--/#nav /.navbar navbar-inverse--&gt;
  &lt;/div&gt;&lt;!--/#nav-wrapper--&gt;
  </code></pre>
  
  <p>Here's my CSS relating to the navigation:</p>
  
  <pre><code>.navbar {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      padding:0;
      z-index:999;
      margin-bottom:0;
  }
  .navbar.navbar-inverse .navbar-inner {
      background: #390 url(../img/green-bg.png) repeat;
      border:none;
      -webkit-border-radius: 0; 
      -moz-border-radius: 0; 
      border-radius: 0;
      margin-bottom:0;
  }
  .navbar .nav, .navbar .nav &gt; li {
      float:none;
      display:inline-block;
      *display:inline; /* ie7 fix */
      *zoom:1; /* hasLayout ie7 trigger */
      vertical-align: top;
      padding:0 2em;
      margin:0;
  }
  .navbar-inner {
      text-align:center;
      margin-bottom:0;
  }
  .navbar-inner ul.nav li {
      text-align: center;
  }
      .navbar .nav &gt; li a{
      color:white; 
      background:rgba(0,0,0,0.2); 
      text-shadow:none; 
      font-size:1.5em; 
      font-family: marvel, serif; 
      padding:.5em 1em; 
      margin:.5em 1em;
  }
  .navbar .nav &gt; .active a:hover, .navbar .nav &gt; li a:hover, .navbar .nav &gt; .active a {
      color:white; 
      background: #390 url(../img/green-bg.png) repeat;
      text-shadow:none; 
      font-size:1.5em; 
      font-family: marvel, serif; 
      padding:.5em 1em; 
      margin:.5em 1em;
      -webkit-box-shadow: inset 0 0 10px #000;
      -moz-box-shadow:    inset 0 0 10px #000;
      box-shadow:         inset 0 0 10px #000;
  }
  .navbar .nav &gt; li {
      padding:1em;
      margin:0;
  }
  #nav.affix, #nav.affix-bottom {
      position: fixed;
      top: 0;
      width: 100%
  }
  #nav {
      position:relative;
      z-index:999;
      -webkit-perspective: 1000; -webkit-backface-visibility: hidden;
  }
  </code></pre>