title: How to create a two-colored navbar?
body: <p>I'm currently working on a website and I need to have a wide navigation bar with only three links/"buttons" there. The problem is that all the so-called buttons are of different colours (attached a screenshot from the actual mockup): <img src="https://i.stack.imgur.com/NZLQ4.png" alt="screenshot">
  Hence, I've applied the the dark yellow colour to the main navbar itself, so there's no problem with the first button (since it's supposed to be yellow), the second one also plays nicely, but the third one is naturally interrupted and the navbar background colour shows up about 200px in the right. I've tried to make a kind of hack by creating an empty navbar-right with the appropriate colour, height and width, but since the site is supposed to be responsive this navbar-right solution only creates additional trouble. 
  So here's my markup (I'm using the standard Bootstrap 3 navbar):</p>
  
  <pre><code> &lt;nav id="mainav" class="navbar navbar-default" role="navigation"&gt;
        &lt;div class="container-fluid"&gt;
            &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                &lt;ul class="nav navbar-nav"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Achievements&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Resources&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Overall Points&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/nav&gt;
  </code></pre>
  
  <p>And the CSS is as follows:</p>
  
  <pre><code>#mainav {
  height: 100px;
  border: none;
  border-radius: 0;
  background-color: #fec708;
  }
  
  #mainav li:first-child {
  height: 100px;
  padding-top: 25px;
  margin-left: 120px;
  width: 330px;
  text-align: center;
  background-color: #fec708;
  }
  
  #mainav li:nth-child(2) {
  height: 100px;
  padding-top: 25px;
  width: 320px;
  text-align: center;
  background-color: #ff7e00;
  }
  
  #mainav li:nth-child(3) {
  height: 100px;
  padding-top: 25px;
  width: 330px;
  text-align: center;
  background-color: #db0104;
  }
  
  #mainav li a {
  font-family: "Open Sans", sans-serif;
  color: #ffffff;
  font-weight: 300;
  font-size: 37px;
  }
  </code></pre>
  
  <p>I'd appreciate if you could share your thought and possible workarounds regarding this particular problem.
  Thanks!</p>