Center Image in Bootstrap Navbar with no overlap - html

Question

I'm trying to figure out two issues.
1.
There's a lot of examples I've seen on how to center an image in the middle of a bootstrap navbar, however, I'm having issues figuring out how to prevent the image from overlapping links when the screen is shrunk down to a smaller size (without triggering hamburger menu)
Example:
JS Fiddle Example
If you shrink the screen down slowly you will see the center icon overlap the 'Reporting' link. How do I prevent this from happening? Is there a way for the image to recognize the edge of the last link and no overlap it?
2.
Is there a way for the navbar to resize in height based on the height of the image instead of the image overlapping the navbar?
Code:
<style>
.navbar-brand.navbar-center {
position: absolute;
left: 50%;
display: block;
text-align: center;
padding: 0px;
}
.navbar-toggle {
z-index:3;
}
</style>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="">Profile</li>
<li class="">My Home</li>
<li>Administration</li>
<li class="dropdown">
Reporting <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<a class="navbar-brand navbar-center" href="http://disputebills.com"><img height="78" width="78" style="margin-right: 10px; padding: 0;" src="https://res.cloudinary.com/disputebills/image/upload/v1462474206/blue-mark_cnzgry.png" alt="Dispute Bills">
</a>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>