xxxxxxxxxx
Try this:
.navbar {
position: relative;
}
.brand {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
Centering your logo by 50% and minus half of your logo width so that it won't have problem when zooming in and out.
xxxxxxxxxx
.navbar .navbar-nav .nav-link {
color: #000000;
font-size: 1.1em;
}
.navbar .navbar-nav .nav-link:hover{
color: #808080;
}
.navbar-logo-centered .navbar-nav .nav-link{
padding: .5em 1em;
}