title: Bootstrap 3 navbar links display vertical when should be horizontal
body: <p>Following Michael Hartl's ruby on rails tutorial and after importing bootstrap into a custom.css.scss file the links display as a block (vertical) when they should really be horizontal causing the navbar to be really thick as shown below. So the question is what did I do wrong and how can I make the navigation horizontal using boostrap?</p>
  
  <p><img src="https://i.stack.imgur.com/B9w5R.png" alt="enter image description here"></p>
  
  <p>Here's my application.html.erb layout</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;&lt;%= full_title(yield(:title)) %&gt;&lt;/title&gt;
        &lt;%= stylesheet_link_tag  "application", media: "all", "data-turbolinks-track" =&gt; true %&gt;
        &lt;%= javascript_include_tag "application", "data-turbolinks-track" =&gt; true %&gt;
        &lt;%= csrf_meta_tags %&gt;
        &lt;!--[if lt IE 9]&gt;
          &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header class="navbar navbar-fixed-top navbar-inverse"&gt;
              &lt;div class="navbar-inner"&gt;
                  &lt;div class="container"&gt;
                      &lt;%= link_to "Dog Park", root_path, id: "logo" %&gt;
                      &lt;nav&gt;
                          &lt;ul class="nav pull-right"&gt;
                              &lt;li&gt;&lt;%= link_to "Home", root_path %&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;%= link_to "About", about_path %&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;%= link_to "Help", help_path %&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;%= link_to "Play Time", '#' %&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/nav&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/header&gt;
          &lt;div class="container"&gt;
              &lt;%= yield %&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here's my Gemfile</p>
  
  <pre><code>source 'https://rubygems.org'
  ruby '2.0.0'
  #ruby-gemset=railstutorial_rails_4_0
  
  gem 'rails', '4.0.2'
  
  group :development, :test do
    gem 'sqlite3', '1.3.8'
    gem 'rspec-rails', '2.13.1'
    gem 'guard-rspec', '2.5.0'
    gem 'spork-rails', '4.0.0'
    gem 'guard-spork', '1.5.0'
    gem 'childprocess'
  end
  
  group :test do
    gem 'selenium-webdriver', '2.35.1'
    gem 'capybara', '2.1.0'
    gem 'growl', '1.0.3'
  end
  
  gem 'sass-rails', '4.0.1'
  gem 'uglifier', '2.1.1'
  gem 'coffee-rails', '4.0.1'
  gem 'jquery-rails', '3.0.4'
  gem 'turbolinks', '1.1.1'
  gem 'jbuilder', '1.0.2'
  gem "bootstrap-sass", "~&gt; 3.0.3.0"
  
  group :doc do
    gem 'sdoc', '0.3.20', require: false
  end
  
  group :production do
    gem 'pg', '0.15.1'
    gem 'rails_12factor', '0.0.2'
  end
  </code></pre>