Bootstrap - Nav bar not working correctly - html

Question

In my project, I implement bootstrap. I also make use of the full navbar that bootstrap provides. I set a custom colour and height to this navbar. When making the browser window smaller, the hamburger icon appears as expected.
When pressing the hamburger icon, none of the menu items appear. I discover that if I make my navbar larger in height, the menu items appear below. However I want the navbar to stay the height it currently is.
Does Anybody know how to move the menu items, maybe to the right to allow them to be seen when the hamburger icon is pressed? This is of course without changing the height of the navbar. Thank you.
Here is my existing code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<div class="imageDiv">
<img class="navbar-brand barberImg" src="{% static 'icon.png' %}" width="63px" alt="Image of man getting haircut">
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" style="color: white; margin-left: 100px;">Home <span class="sr-only">(current)</span></a>
</ul>
</div>
</nav>
.navbar{
background-image: none;
background-color: #191919 !important;
height: 4.9em;
}
.imageDiv {
background-color: #CED0CE;
width: 98px;
height: 80px;
position: relative;
margin-top: -1px;
margin-left: -16px;
}
.barberImg {
position: relative;
bottom: 6px;
left: 15px;
}
#media screen and (max-width: 991px) {
.imageDiv {
position: relative;
bottom: 8px;
}
}