Les éléments enfants d'une <div> ne prennent pas toute la largeur !

Bonjour,

Je vous expose mon problème : je commence avec le responsive design et j'essais de transformer un tabs de bootstrap (une liste de 5 éléments dans mon cas) en un seul bouton avec des flèches à droite et à gauche pour changer l'affichage du contenu. Pour ce faire j'effectue un 'display:none' sur les éléments de la liste sauf pour celui qui est actif. Il me reste donc d'affiché qu'un seul élément de la liste, ainsi que les deux flèches adjacentes.

Cependant, et c'est là mon problème, ces 3 éléments (deux flèches et ma liste 'unique') ne prennent pas 100% de la largeur de la <div> parent.
Je ne peux pas utiliser de dimension en pixel puisque mon site se veut responsive.

Dans un premier temps, pour aligner les 3 éléments, j'ai utilisé 'display:inline-block'.

Voici ma portion de code HTML :

'<div class="tabbable tabs-left">'.
    // l'icône gauche
    '<div class="icon-nav icon-left">'.$this->Bs->icon('chevron-left').'</div>'.
    // la liste en question
    '<ul class="nav nav-tabs">';
        foreach (...){
            <li>...</li>
        }
    '</ul>'.
    // l'icône droite
    '<div class="icon-nav icon-right">'.$this->Bs->icon('chevron-right').'</div>'.
    // Le contenu de chaque tab..
    '<div class="tab-content">'.
        '<div class="tab-pane">...</div>'.
    '</div>'.
'</div>';

Et voici le bout de CSS (sass) correspondant :

@media (max-width: 615px) {
.partenaires .tabs-left ul.nav-tabs {
    border-bottom: none; }
.partenaires .tabs-left .nav-tabs > li {
    float: none;
    display: none;
    text-align: center; }
.partenaires .tabs-left .nav-tabs > li.active {
    display: inline-block;
    width: auto; }
.partenaires .tabs-left .nav-tabs > li.active a, .partenaires .tabs-left .nav-tabs > li.active a:hover, .partenaires .tabs-left .nav-tabs > li.active a:focus {
    background-color: #87b819;
    color: white;
    border: none;
    border-radius: 0px; }
.partenaires .tabs-left ul.nav-tabs {
    width: auto;
    display: inline-block;
    border: none;
    margin-bottom: 0px; }
.partenaires .tabs-left .icon-nav {
    display: inline-block; }
.partenaires .tabs-left .icon-left {
    margin: 10px 20px 10px 20px; }
.partenaires .tabs-left .icon-right {
    margin: 10px 20px 10px 20px; } 
}

Merci d'avance pour votre aide,

Maxime M.