Why its happening? : So, i'm tryin' to create a full width navbar using bootstrap, but theres a kind of limit in my nav [LIKE THIS][1]


This is my html:

    <div class="row">
        <div class="col-md-12 text-center">
            <nav class="navbar navbar-default">
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
            </nav>
        </div>
    </div>

This is my css:

    @import url(https://fonts.googleapis.com/css?family=Raleway:400,700,300,100);
    
    body {
        font-family: "Raleway", Sans-Serif;
        font-weight: 400;
    }
    
    p {
        text-align: justify;
        font-size: 16px;
    }
    
    .navbar {
        font-weight: 700;
        letter-spacing: 2px;
        
        text-transform: uppercase;
    }
    
    .navbar-default .navbar-nav .active a,
    .navbar-default .navbar-nav .active a:focus,
    .navbar-default .navbar-nav .active a:hover,
    .navbar-default .navbar-nav li a:hover{
        color:#e1b315;
    }
    
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
    }
    
    .navbar-default .navbar-nav li {
        margin: 0 15px;
    }

I'm not certainly about why that happens =/

What i'm really tryin' to do is something [LIKE THIS][2]


  [1]: http://i.stack.imgur.com/PJn5N.png
  [2]: http://i.stack.imgur.com/kZgRo.png