title: Bootstrap justified nav not working
body: <p>I need to make a responsive navbar and I wanted to use something like this </p>
  
  <p><a href="http://getbootstrap.com/examples/justified-nav/" rel="nofollow noreferrer">http://getbootstrap.com/examples/justified-nav/</a></p>
  
  <p>It is supposed to load like this
  <img src="https://i.stack.imgur.com/3YtY5.png" alt="enter image description here"></p>
  
  <p>And when min-width reaches 768px it changes to this
  <img src="https://i.stack.imgur.com/qdwGC.png" alt="enter image description here"></p>
  
  <p>But in my project it loads like this and it doesn't change at all</p>
  
  <p><img src="https://i.stack.imgur.com/pUSMI.png" alt="enter image description here"></p>
  
  <p>I used the styles from the example page (<a href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="nofollow noreferrer">http://getbootstrap.com/examples/justified-nav/justified-nav.css</a>)</p>
  
  <p>This is what's inside the body of my html</p>
  
  <pre><code>&lt;header&gt;
  &lt;a href="/index.html"&gt;&lt;img id="logoss" src="images/logo.png"&gt;&lt;/a&gt;
                  &lt;ul class="nav nav-justified"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Empresa&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Medios&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Acci&amp;oacuten&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Herramientas&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Staff-Sumate&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;&lt;/header&gt;
  </code></pre>
  
  <p>and all of my style.css</p>
  
  <pre><code>* {
      margin:0;
      padding:0;
  }
  
  body {
      background-color:#3b8476;
  }
  
  header {
      height:200px;
      margin: 0 auto;
      max-width: 80%;
      background-color:#fff;
      background: #dddddd; /* Old browsers */
      background: -moz-linear-gradient(top,  #dddddd 0%, #ffffff 16%, #ffffff 82%, #dddddd 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(16%,#ffffff), color-stop(82%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #dddddd 0%,#ffffff 16%,#ffffff 82%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #dddddd 0%,#ffffff 16%,#ffffff 82%,#dddddd 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #dddddd 0%,#ffffff 16%,#ffffff 82%,#dddddd 100%); /* IE10+ */
      background: linear-gradient(to bottom,  #dddddd 0%,#ffffff 16%,#ffffff 82%,#dddddd 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
  
  }
  
  #logoss {
      height:8em;
      width:8em;
      display:inline-block;
      margin:2em;
  }
  
  
  /* from justified navbar example  */
  
  
  .nav-justified {
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #ccc;
  }
  .nav-justified &gt; li &gt; a {
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #777;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #d5d5d5;
    background-color: #e5e5e5; /* Old browsers */
    background-repeat: repeat-x; /* Repeat the gradient */
    background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
    background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
  }
  .nav-justified &gt; .active &gt; a,
  .nav-justified &gt; .active &gt; a:hover,
  .nav-justified &gt; .active &gt; a:focus {
    background-color: #ddd;
    background-image: none;
    box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
  }
  .nav-justified &gt; li:first-child &gt; a {
    border-radius: 5px 5px 0 0;
  }
  .nav-justified &gt; li:last-child &gt; a {
    border-bottom: 0;
    border-radius: 0 0 5px 5px;
  }
  
  @media (min-width: 768px) {
    .nav-justified {
      max-height: 52px;
    }
    .nav-justified &gt; li &gt; a {
      border-left: 1px solid #fff;
      border-right: 1px solid #d5d5d5;
    }
    .nav-justified &gt; li:first-child &gt; a {
      border-left: 0;
      border-radius: 5px 0 0 5px;
    }
    .nav-justified &gt; li:last-child &gt; a {
      border-radius: 0 5px 5px 0;
      border-right: 0;
    }
  }
  </code></pre>