Center Logo in the navbar - html

Question

I'm having trouble centering my logo in the navbar. I've looked through other posts, but none of the solutions seem to work without messing something else. I don't understand why the logo won't center and I need the site to be responsive.
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Recruitment</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="template.html">
<img src = "logo.png" width="100" alt="logo thing">
</a>
</div>
<div class="hamburger-menu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Leadership</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sisterhood</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Philanthropy</a>
</li>
</ul>
</div>
</nav>
Here's the css for the html.
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
position: relative;
float: center;
}
}
.navbar{
font-family: Montserrat;
font-size: 1em;
}
/* change spacing for nav items*/
.navbar-expand-md .navbar-nav .nav-link {
padding-right: 2.5rem;
padding-left: 2.5rem;
}
.nav-item, .navbar-nav{
font-family: Montserrat;
}

Answer 1

.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
position: relative;
float: center;
}
}
You have an extra breaking bracket after float:center;.
There is no such thing as float:center;
There are a variety of ways to center things. The easiest is to:
.parent-element {
display: flex;
justify-content: center;
}
If the parent is position: relative, you can make the target element position absolute and do this https://codepen.io/anon/pen/EQGgpM:
.parent-element {
position: relative;
width: 200px;
height: 50px;
outline: 1px solid #000;
}
.child {
position: absolute;
outline: 1px solid #cc0000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Answer 2

An img element responds to text-align: center just fine.
html, body {
width:100%;
text-align: center;
}
<img src="https://telecomputingarchitects.com/media/logo.png" alt="logo" height="48">