title: Why is right-aligned text in my navbar shifted too far to the right?
body: <p>I try to display some text at the right side of a navbar. The docs state that such text must be inside a <code>p</code> tag and the classes <code>navbar-text</code> and <code>navbar-right</code> should be applied to this tag. I did this, but the text floated too far to the right. There is no space left to the right.</p>
  
  <p>This is what my browser displays:
  <img src="https://i.stack.imgur.com/pbWqL.png" alt="Navbar"></p>
  
  <p>And this is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"&gt;
  &lt;head&gt;
  &lt;title&gt;Demo&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
      th:href="@{/webjars/bootstrap/3.3.2/css/bootstrap.min.css}" rel="stylesheet" /&gt;
  &lt;script src="http://code.jquery.com/jquery-2.1.3.min.js" th:src="@{/webjars/jquery/2.1.3/jquery.min.js}"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"
      th:src="@{/webjars/bootstrap/3.3.2/js/bootstrap.min.js}"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav class="navbar navbar-inverse navbar-static-top" role="navigation"&gt;
      &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"&gt;
          &lt;span class="sr-only"&gt;Navigation ein-/ausblenden&lt;/span&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;/button&gt;
          &lt;a class="navbar-brand" href="#"&gt;App&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse" id="main-nav"&gt;
          &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;p class="navbar-text navbar-right"&gt;Angemeldet als Max Mustermann&lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I missing?</p>