Make navigation bar on the top right

I want to create navigation bar contains logo (left) and the list (right) here is my code

     <nav>
        <div class="row">
            <div class="col-md-3">
                <a href="#" class="logo">SPIRIT8</a>
            </div>
            <div class="col-md-9">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">TEAM</a></li>
                    <li><a href="#">SERVICES</a></li>
                    <li><a href="#">PORTFOLIO</a></li>
                    <li><a href="#">TESTIMONIALS</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </div>
            </div>
       </nav>

I want li tags move to the right all the way. I can not make it by margin-right:0 li (the yellow box), or padding-right:0 ul (the red box) I use grid bootstrap but don't know why ul (the red border) have space on the right eventhough I set width 100%.

This is the result that I want : http://themeforces.com/demo/freebies/tf-free-no.3/

my css :

 nav {
   height: 70px;
   line-height: 70px;
   border: 1px  solid green;
 }

 nav ul {
    list-style: none;
    width: 100%;
    border: 1px solid red;
 }

nav ul li {
  display: inline-block;
  font-size: 60%;
  margin-right: 0;
  border : 1px solid yellow;
 }