HTML/CSS - logo link that spans entire header

Question

I am having a bit of a fail with a header I am trying to edit on a wordpress template. Basically, I have a logo image which I have positioned in the center of the header. I want this logo to act as a link for the home page. I have managed to do this, but at the moment, the entire width of the header acts as a link, where as I only want the link to encompass the image (ie only be the dimensions of the image). I am not sure why this is, I know I will be doing something silly, but trial and error isnt getting me anywhere fast.

Any help would be greatly appreciated.

Here is the html/php

<!-- BEGIN #header -->
    <div id="header">

        <!-- BEGIN .row -->
        <div class="row">

            <!-- BEGIN .sixteen columns -->
            <div class="sixteen columns">

                <?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) { ?>
                    <h1 id="custom-header">
                            <a href="<?php echo home_url(); ?>/" title="Home">
                                    <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo('name'); ?>" />
                                        </a>
                                    <?php bloginfo( 'name' ); ?></h1>

                <?php } ?>

            <!-- END .sixteen columns -->
            </div>

        <!-- END .row -->
        </div>

        <!-- BEGIN .row -->
        <div class="row">
                    ......

CSS:

#header {
line-height: 0;
margin: 0px;
position: relative;
z-index: 99;
}


#custom-header {
display: block;
padding: 0px;
font-size: 0;
text-indent: -999em;
line-height: 0;
margin:0px;
padding: 0px;
overflow: hidden;
z-index: 8;
}

#custom-header img {
display:block;
margin: 0px auto 0px;
height: auto;
text-align: center;
padding: 0px;
vertical-align: bottom;
}

.row { 
width: 100%; 
margin: 0 auto; 
}


.row .sixteen   { width: 100%; }

Answer 1

use this

#custom-header a{
    display:block;
    width:280px;
    height:80px;
    margin:0 auto;
}

here is the updated jsFiddle File