title: Bootstrap 3 navbar alignment issue
body: <p>I just started using Bootstrap today and I'm having this alignment issue with the navbar. The links move to the next line on desktop:</p>
  
  <p><a href="https://i.stack.imgur.com/L7VxF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L7VxF.png" alt="enter image description here"></a></p>
  
  <p>Here's a working demo: <a href="http://jsfiddle.net/b5mbbwgb" rel="nofollow noreferrer">http://jsfiddle.net/b5mbbwgb</a></p>
  
  <p>The code:</p>
  
  <pre><code> &lt;div class = "navbar navbar-inverse navbar-static-top"&gt;
             &lt;div class = "container"&gt;
               &lt;div class="navbar-header"&gt;
                     &lt;button class = "navbar-toggle pull-left" data-toggle = "collapse" data-target = "#nav-header-links-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;/button&gt;
                     &lt;a class="navbar-brand navbar-brand-centered" href="#" data-toggle = "collapse" data-target = "#nav-header-logo-collapse"&gt;
                      &lt;img alt="logo" width="164" height="30" src="http://placehold.it/164x30?text=LOGO"&gt;
                  &lt;/a&gt;
                  &lt;a class = "navbar-toggle pull-right glyphicon glyphicon-search" data-toggle = "collapse" data-target = "#nav-header-search-collapse"&gt;
  
                     &lt;/a&gt;
  
                  &lt;/div&gt;
                      &lt;div class = "collapse navbar-collapse" id="nav-header-search-collapse"&gt;
                          &lt;form class="nav navbar-form" role="search"&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;input type="text" class="form-control" placeholder="Search" name="q"&gt;
                                  &lt;div class="input-group-btn"&gt;
                                      &lt;button class="btn btn-default" type="submit"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                  &lt;/div&gt;
  
                     &lt;div class = "collapse navbar-collapse" id="nav-header-links-collapse"&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;Social&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href = "#"&gt;Contact&lt;/a&gt;&lt;/li&gt;                             
                                    &lt;li&gt;&lt;a href = "#"&gt;About&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                     &lt;/div&gt;
             &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>After numerous attempts I'm not able to fix these issues:</p>
  
  <ol>
  <li>Links move to the next line</li>
  <li>Search input has lines on top &amp; bottom on mobile. See screenshot below</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/1HAWO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1HAWO.png" alt="enter image description here"></a></p>
  
  <p>Can someone give me a hint on what needs to be done to fix these 2 issues? I'm learning, so I'd appreciate a basic explanation too. Thanks!</p>