How do I center a form in a navbar? : <p>I have this Bootstrap4 Navigation bar. There is a brand and a couple links (nav-item). Below I have a search form that appears on the right. How would I center it inside the nav. It shouldn't be centered to take up the remaining space, rather be centered completely inside the entire navbar. Any classes or styles I should add to make this work? Also, I would like to add links on the right side, where the form is currently standing.</p>

<p>I've tried messing around with the margin classes, adding "mx-auto" to the form, placing the form inside the ul list and using "display: inline-block"</p>

<pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;

    &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
        &lt;ul class="navbar-nav mr-auto"&gt;
            &lt;li class="nav-item active"&gt;
                &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;form class="form-inline my-2 my-lg-0"&gt;
            &lt;input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"&gt;
            &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

<p>As stated earlier, the inline form is centered on the right side, but it should be fully centered, in the middle. Here are some photos for context. (also, I am using Bootstrap Material Design, that's why it looks a bit different)</p>

<p>Current:
<a href="https://ibb.co/ZY7FMXg" rel="nofollow noreferrer">Current result</a>
What I want:
<a href="https://ibb.co/ZY7FMXg" rel="nofollow noreferrer">What I want/Expected</a></p>
