I recently put together a Bootstrap 4 navbar and now I'm looking to increase the spacing between the items on the right side of the navbar.
<nav id="menu" class="navbar navbar-expand-md sticky-top">
<div class="site-branding navbar-brand container-fluid">
<a class="navbar-brand" href="#"><img src="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link menu-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
<!-- .site-branding -->
</nav>
After attempting to adjust the .menu-link class with padding and margin, I didn't see any noticeable changes.
https://github.com/jvjames97/Boostrap-4-Navbar/blob/master/HTML5
I am hoping to add an additional 20 pixels of space between the elements in the navbar.