Horizontal menu does not use 100% of space

Question

Guys I’m making a simple horizontal menu and I split the columns in percentage so the last column isn’t breaking the row. I need the menu this way because it will be responsive.

HTML and 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;
}

<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>

code in jsfiddle

Thank you