title: Twitter Bootstrap responsive navbar - centering links
body: <p>At the moment I am building my first responsive site with Twitter Bootstrap and I am running into an issue I can't solve by myself.</p>
  
  <p>I am customizing the media queries, but when it comes to the links inside the navbar I am stuck.
  I want <code>.brand</code> to be centered and the navigation links should be centered below - a new line for each link. I managed to center <code>.brand</code> using this CSS code in the appropriate media query:</p>
  
  <pre><code>.brand {
      display: block;
      width: 100%;
      text-align: center;
  }
  </code></pre>
  
  <p>Now for the links. This is the code:</p>
  
  <pre><code>.navbar li a {
      display: block;
  }
  </code></pre>
  
  <p>The selector seems right because when I assign a background color, it shows up. But using <code>display: block;</code> does not result in a new row for each link. Using <code>width: 100%;</code> also does not result in the desired form.</p>
  
  <p>My guess is that it has something to do with the <code>li</code> each link is wrapped in.</p>
  
  <pre><code>&lt;div class="navbar"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;a class="brand" href="#"&gt;Thomas Glaser&lt;/a&gt;
              &lt;ul class="nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Arbeiten&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#about"&gt;Thomas&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#contact"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-inner --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried to fiddle around with the CSS, but using a trial &amp; error method in combination with such large CSS files is not really recommended I guess, that's why I am asking you: What CSS code is needed, to display the links inside the navbar one below the other?</p>