Centering an image used as an anker (hyperlink)

Hey there, I'm having a little trouble with this.

For the mobile approach, I want to have a logo on top of my nav links which just redirect's the user to home of the site, and I want it to be centered (for now).

Right now, html looks like this:

<a href="http://gazu.carina.uberspace.de" class="main-logo group">
  <img src="img/Gazudin_Logo.png">
</a>

and css:

.main-logo {
    display: block;
    text-align: center;
    margin: auto;
}

It kinda works now, but the area left and right to the image is also clickable, because the link takes up all the space from left to right,with the image in the center. It isn't that bad but it's not what I intended, and I'd like to know how to resolve this, so that just the image is clickable and not all of the space. I tried using inline-block instead of block, which makes only the image clickable, but I haven't been able to center that, it just sticks to the left side then.

Any advice? I know I'm most likely missing something very obvious.