How to create a two-colored navbar?

Question

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 colors (attached a screenshot from the actual mockup): ![screenshot][1] [1]: https://i.sstatic.net/NZLQ4.png

Hence, I've applied the dark yellow color 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 color, 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):

<nav id="mainav" class="navbar navbar-default" role="navigation">
   <div class="container-fluid">
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li><a href="#">Achievements</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Overall Points</a></li>
         </ul>
      </div>
   </div>
</nav>

And the CSS is as follows:

#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;
}

I'd appreciate if you could share your thought and possible workarounds regarding this particular problem. Thanks!

Answer 1

If you know for certain that this will always remain three buttons and the second one is centered, you could just style the center button orange and set a background gradient to the navbar with 50% yellow and 50% red:

#mainnav {
  background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.5, #FEC908),
        color-stop(0.5, #DB0104)
        );
  background-image: -o-linear-gradient(right, #FEC908 50%, #DB0104 50%);
  background-image: -moz-linear-gradient(right, #FEC908 50%, #DB0104 50%);
  background-image: -webkit-linear-gradient(right, #FEC908 50%, #DB0104 50%);
  background-image: -ms-linear-gradient(right, #FEC908 50%, #DB0104 50%);
  background-image: linear-gradient(to right, #FEC908 50%, #DB0104 50%);
}