How to move items around in the bootstrap fixed navbar - html

Question

I'm trying to created a fixed-top navbar using Bootstrap 4 however I'm having a very difficult time trying to align the LOGO and MENU items to my liking.
I understand there is ml-auto, mr-auto however, is it possible for me to add pixels to it so I move it exactly how I want to?
This is what my navbar looks like:
I am hoping to move the LOGO and the MENU items towards the middle of the screen. maybe start with padding of 100px from right and left, so LOGO and MENU are closer together. Here is my code:
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>

Answer 1

You can add padding to the main .navbar element. Then control the spacing using media queries.
.navbar {
padding: 0.5em 100px !important;
}
#media only screen and (max-width: 768px) {
.navbar {
padding: 0.5em 1em !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>