Q:

Make last li block until the end of pills

So I have a design like this:

And my html:
<div id="tabs-profile">
        <ul class="nav nav-pills uppercase bold">
          <li class="active"><a data-toggle="pill" href="#portfolio">portfolio</a></li>
          <li><a data-toggle="pill" href="#info">info</a></li>
          <li><a data-toggle="pill" href="#recommendation">recommendation</a></li>
        </ul>
      </div><!-- tabs-profile -->

And my css:
.nav-pills>li>a{
padding: 10px 35px;
border-radius: 0;
color: #fff;}

.nav-pills{
padding: 5px 0 0;
background-color: #f8e713;}

Question:
How to make the last li that have background color until the end of navpills when active? 

A:

Please add .last-child class when the li is active. 

.nav-pills>li>a {
  padding: 10px 35px;
  border-radius: 0;
  color: #fff;
}

.nav-pills {
  padding: 5px 0 0;
  background-color: #f8e713;
  display: block;
  float: left;
  width: 100%;
}

.nav-pills>li {
  float: left;
  list-style:none;
}

.nav-pills>li.last-child {
  background-color: #fff;
  float: none;
  overflow: hidden;
}

.nav-pills>li.last-child a {
  color: #333;
}
<div id="tabs-profile">
  <ul class="nav nav-pills uppercase bold">
    <li class="active"><a data-toggle="pill" href="#portfolio">portfolio</a></li>
    <li><a data-toggle="pill" href="#info">info</a></li>
    <li class="last-child"><a data-toggle="pill" href="#recommendation">recommendation</a></li>
  </ul>
</div>
<!--  tabs-profile -->

