title: Why are the list items in this simple bootstrap navbar running into each other?
body: <p>I am getting up to speed with Bootstrap. To start with I am creating a simple collapsible navbar. I have followed basic instructions from <a href="http://getbootstrap.com" rel="nofollow noreferrer">getbootstrap.com</a> as explained below but the navbar is not displaying correctly, the menu items are running into each other, and look nothing like <a href="http://getbootstrap.com/components/#navbar" rel="nofollow noreferrer">the example</a> on getbootstrap.com. </p>
  
  <p>Firstly I copied the sample HTML template, as per the <a href="http://getbootstrap.com/getting-started/" rel="nofollow noreferrer">getting started</a> page suggestions: </p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Hello, world!&lt;/h1&gt;
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Next I changed the CSS and Javascript file locations to use files hosted by MaxCDN, following the code on the getting started page exactly. </p>
  
  <pre><code>&lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
  
      &lt;!-- Bootstrap --&gt;
     &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
    &lt;/head&gt;
    &lt;body&gt;  
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Finally I added a simple navbar to the body, using the code on the <a href="http://getbootstrap.com/components/#navbar" rel="nofollow noreferrer">components section</a> of the getbootsrap documentation. </p>
  
  <p>The finished file is:</p>
  
  <pre><code>&lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
  
      &lt;!-- Bootstrap --&gt;
     &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;nav class="navbar navbar-default"&gt;
      &lt;div class="collapse navbar-collapse" id="menuitems"&gt;
          &lt;ul class="navbar navbar-nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Skills&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  
  &lt;/nav&gt;
  
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is that the navbar looks like this: </p>
  
  <p><a href="https://i.stack.imgur.com/g9Qdi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g9Qdi.png" alt="enter image description here"></a></p>
  
  <p>Both Chrome and Firefox display the same. </p>
  
  <p><a href="https://codepen.io/ProgrammingandWebDev/pen/WjGPad" rel="nofollow noreferrer">Here</a> is a codepen of the problem. </p>
  
  <p>What am I missing?</p>