WordPress标题中的神秘框

I have this weird issue that I haven't been able to resolve. I added a logo to my WordPress header, by adding code to enable the option in the customizer, that caused the "a href=..." div to appear as an "invisible" empty box under the logo that I can't get rid of.

I've tried editing the CSS a hundred different ways but can't get it to disappear...

I did a fair amount of customization, but my starting point was the Underscores starter theme.

You can have a look at the website here. You'll need to use the element inspector to see the empty box:

www.salientcity.com

Thanks!

Here is the php in my header file

<div class="title-box">
<?php $logo=get_theme_mod('logo');?>
    <?php if ($logo) { ?>
        <a href="<?php echo home_url(); ?>"><img src="<?php echo $logo; ?>" alt="<?php bloginfo( 'name' ); ?>"/></a>
    <?php } else { ?>
        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
        <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    <?php } ?>

and here is the CSS that I'm using:

.header-image img {
    display: block;
    margin: 0 auto;
}
.header-background-image {
    background: no-repeat center;
    background-size: cover!important;
    -moz-background-size: cover!important;
    -webkit-background-size: cover!important;
}

.header-background-image .title-box { /* Main image box in header, where logo will be */
    background: #ff9900;
    background: hsla(36, 100%, 50%);
} 
.site-branding {
    padding: 2rem 0; /* Header block padding top and bottom */
    text-align: center;
    background: #fff; /* Header block color, background of website image */
    background: hsl(0° 0% 100%)
}
.title-box {
    width: 600px;
    max-width: 75%;
    padding: 5rem 0 0 0;
    margin: 0 auto;
}

.site-title {
    font-weight: 300;
    font-size: 40px;
    font-size: 4.5rem;
    text-transform: uppercase;
    line-height: normal;
    padding-bottom: 1rem;
}

.site-description {
    font-weight: 100;
    font-size: 20px;
    font-size: 2rem;
}

.site-title a,
.site-description { /* Font color of header, eventuely changed for logo */
    color: #fff;
    color: hsl(0, 0%, 100%);

I have noticed something else. Please do one thing just edit you logo in photoshop and remove extra spaces from top and bottom of your logo and then upload you new logo. I hope you will not see this anchor box.

Look here is your logo with space at top and bottom. http://salientcity.com/wp/wp-content/uploads/2015/04/Salient-logo.png