我有一个 Bootstrap 4 导航栏，我无法对齐所有设备（或任何设备）上的中心元素。目前，导航栏左侧有一个图像，我目前正在使用填充来推动其余部分，但这充其量是一个丑陋的黑客。
我认为需要做的是导航栏需要一直延伸到页面顶部，而不仅仅是图像。这样我就可以使用类之text-justify类的东西将元素对齐到中心。
对齐它的最佳方法是什么？
HTML：
<!--Site header-->
<header class="site-header" id="top-bar">
<!-- Navbar-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top ml-auto">
<div class="container col-md-12">
<!-- Image on the left of the navbar -->
<div class="navbar-nav mr-auto" style="padding: 0 100 0 20;">
<a href="{% url 'landing' %}">
<img id="header-img" src="{% static '/bg/WEBSITE-LOGO.png' %}"/>
</a>
</div>
<button aria-controls="navbarToggle"
aria-expanded="false"
aria-label="Toggle navigation"
class="navbar-toggler"
data-target="#navbarToggle"
data-toggle="collapse"
type="button">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links I want aligned to center of navbar -->
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav m-auto">
<div class="header-icon-container d-xs-none">
<a class="nav-item nav-link d-xs-none" href="{% url 'overview' %}" id="overview">
<i class="fas fa-home fa-2x"></i>
<span>Home</span>
</a>
</div>
<div class="header-icon-container">
<a class="nav-item nav-link" href="#" id="drills">
<i class="fas fa-dumbbell fa-2x"></i>
<span>Drills</span>
</a>
</div>
</div>
<!-- Navbar Right Side - more links -->
<div class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<div class="btn-group text-right">
<button class="account-dropdown"
data-toggle="dropdown"
type="button">
<img class="account-header-img" src="{{ user.image.url }}">
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<form action="{% url 'overview' %}"
class="small-form"
method="get">
<input class="btn btn-link link-white"
type="submit"
value="Test stats">
</form>
</li>
<li>
<form action="{% url 'categories' %}"
class="small-form"
method="get">
<input class="btn btn-link link-white"
type="submit"
value="Categories">
</form>
</li>
<li>
<form action="{% url 'profile' %}"
class="small-form"
method="get">
<input class="btn btn-link link-white"
type="submit"
value="Update profile">
</form>
</li>
<li>
<form action="{% url 'logout' %}"
class="small-form"
method="get">
<input class="btn btn-link link-white"
type="submit"
value="Logout">
</form>
</li>
</ul>
</div>
{% else %}
<a class="nav-item nav-link ml-auto" href="{% url 'login' %}">
<i class="fas fa-sign-in fa-2x"></i>
<span>Sign in</span>
</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>