Hover only working on link, not whole div

Question

I'm designing a web page and I used HTML5 to make an entire div tag a link. Prior to adding the link, the whole div would expand when I hovered over it. Suddenly, it's only working if I hover over the words, not the box I created. The HTML looks like this (minus the actual link):

<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>

And the CSS to make it hover looks sort of like this:

.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}

(Note: This is not all of the code in the stylesheet. I have some lovely color in there too.)

Is there something I'm missing in my CSS to make the whole thing work on the hover and not just the words? I'm not even sure what questions to ask to figure out what I've done here.

ETA: I have checked this across three different browsers. It has the same problem on IE, Firefox and Chrome.

ETA: CSS without the :hover attribute.

.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}

ETA: Okay, here's something very weird. It seems that any elements on the far right don't have this problem. Seriously, the forums tab and next button on the far right both have :hover elements and they work exactly as I want them to.

Answer 1

Get rid of the <div> entirely and set <a> to display: block.

You're not supposed to put block-level elements inside of an <a> anyway.