Horizontal menu does not use 100% of space

Personal I'm making a simple horizontal menu and divided the columns in percentage so that the last column is not breaking the line. I need the menu in this way because it will be responsive.

HTML:

<nav style="margin-top: 20px; border-bottom: 1px solid #664232">
  <div class="row">
                <div class="col-sm-12">
                    <ul>
                        <li  style="line-height: 40px"><a href="#" class="ativo">Apresentação</a></li>
                        <li><a href="#">Apresentação<br>Apresentação</a></li>
                        <li><a href="#">Apresentação<br>Apresentação</a></li>
                        <li style="line-height: 40px"><a href="#">Apresentação</a></li>
                        <li><a href="#">Apresentação<br>Apresentação</a></li>
                        <li style="line-height: 40px"><a href="#">Apresentação</a></li>
                        <li style="line-height: 40px"><a href="#">Apresentação</a></li>
                        <li style="line-height: 40px"><a href="#">Apresentação</a></li>
                        <li><a href="#">Apresentação<br>Apresentação</a></li>
                    </ul>
                </div>
            </div>
</nav>

CSS:

nav ul {
    padding:0px;
    margin:0px;
    list-style:none;
    height: 48px;
    width: 100%;
}

nav ul li {
    display:  inline;
}

nav ul li a {
    /*padding: 2px 22px;*/
    padding: 0;
    width: 11%;
    display: inline-block;
    text-decoration: none;
    color: #664232;
    text-align: center;
    vertical-align: middle;
}

nav ul li a:hover {
    color: #e1dbd8;
    border-top:2px inset #e1dbd8;
    text-decoration: none;
}

.ativo {
    color: #E8CCB0;
    border-top:2px solid #E8CCB0;
    text-decoration: none;
}

code in jsfiddle

Thank you