Whole header is clickable, instead of image only

I want only the image(logo) in my header to be clickable, but i can also click left and right of it. The nav menu works as it should.

The code of header:

<div class="head">
     <a href="<?php bloginfo('url'); ?>/novice"><img src="<?php bloginfo('template_directory'); ?>/pcs/logo.png" class="logo" align="middle" alt="LOGO"/></a>
     <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</div>

CSS:

.head{
    padding-bottom: 30px;
}

.logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:53px;
}

Note: the margin-bottom is not clickable

I also tried to assign width to <a> tag, but that didnt work.

Any ideas?