html - HTML/CSS - ヘッダー全体にわたるロゴ リンク

Question

wordpress テンプレートで編集しようとしているヘッダーで少し失敗しています。基本的に、ヘッダーの中央に配置したロゴ画像があります。このロゴをホームページへのリンクとして機能させたい。私はこれを行うことができましたが、現時点では、ヘッダーの幅全体がリンクとして機能します。リンクが画像を囲むだけである（つまり、画像の寸法のみである）ためです。これがなぜなのかはわかりませんが、ばかげたことをすることはわかっていますが、試行錯誤してもすぐにはうまくいきません。

どんな助けでも大歓迎です。

ここに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%; }