Bootstrap 4 li item full width
<p>My navigation li items do not use the full space. Why is that? I'm using bootstrap 4. </p>

<pre><code>&lt;nav class="navbar"&gt;
    &lt;div&gt;
        &lt;ul class="nav navbar-nav"&gt;
            &lt;li id="navigation__name nav-item" class="col-md-3"&gt;Forum&lt;/li&gt;
            &lt;li class="col-md-3"&gt;Home&lt;/li&gt;
            &lt;li class="col-md-2"&gt;Registreer&lt;/li&gt;
            &lt;li class="col-md-2"&gt;&lt;a [routerLink]="['/login']"&gt;Login&lt;/a&gt;&lt;/li&gt;
            &lt;li class="col-md-2"&gt;&lt;a href="http://www.home.nl"&gt;Naar Home&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/nav&gt;


li
  background #3c3e42
  color white
  padding 0px
</code></pre>

<p>Example:</p>

<p><a href="https://i.stack.imgur.com/Plt0v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Plt0v.png" alt="enter image description here"></a></p>

<p>What is wrong here?</p>