title: Navbar-text breaks out of Bootstrap navbar when resized to mobile size
body: <p><a href="https://jsfiddle.net/rpq1tf9x/" rel="nofollow noreferrer">https://jsfiddle.net/rpq1tf9x/</a></p>
  
  <pre><code>  &lt;body&gt;
  
  &lt;nav class="navbar navbar-inverse"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&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;Italian Joe&lt;/a&gt;
      &lt;/div&gt;
  
        &lt;p class="navbar-text text-center" id="NavHours" style="color:white; margin:1%; width: 220px;"&gt; Open 6am to 5pm &lt;/p&gt;
  
      &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
  
        &lt;ul class="nav navbar-nav navbar-right"&gt;
           &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt; 
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>As can be seen in this jsfiddle link, I have a basic bootstrap collapsing navbar that has an added text in the middle reading "Open 6am to 5pm", it's all fine and dandy on bigger screens but when you resize it to smaller screens it breaks the navbar. Anyone know why this is? Thanks </p>