Why container inside the navbar have restricted width instead of filling the entire width?

Question

I m trying to create a navbar with 100% width in my website but I need the ul tag inside my div tag to fill the entire width.

<nav class="navbar navbar-dark navbar-expand ">
    <div class="container-fluid">
        <ul class="navbar-nav">
            <li class="navbar-item col-5">Nav 1</li>
            <li class="navbar-item col-3">Nav 2</li>
            <li class="navbar-item col-3">Nav 3</li>
        </ul>
    </div>
</nav>

Answer 1

You should define your container outside of your nav:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container-fluid">
  <nav class="navbar navbar-dark navbar-expand ">
    <ul class="navbar-nav" style="background: red; width: 100%">
        <li class="navbar-item col-5">Nav 1</li>
        <li class="navbar-item col-3">Nav 2</li>
        <li class="navbar-item col-3">Nav 3</li>
    </ul>
  </nav>
</div>