(Note: For compatibility reasons I may only use HTML and CSS for this.)

I have a `div` containing an `h4` tag. What ends up happening is my `h4` tag has a auto-defined width based on how much text is included. However when I include it under my `div` tag the `div` automatically uses `width:100%` instead of surrounding the tag like I want it to. This becomes a problem because when I change the color of the `div` via `hover` I see a ton of extra unfilled space.

Here is one example of the issue I'm experiencing:

```
<a href='./HH.html'>
<div id='homenav'>
    <h4>
        HH
    </h4>
</div>
</a>

```

This is my current CSS:

```
h4{padding:0px;Margin:5px;}
#homenav
{
   font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
   background: #e8edff;
   color: #669;
   text-align:center;
   vertical-align: middle;
   display:-webkit-box;
   -webkit-box-pack:left;
   -webkit-box-align:left;
   display:-moz-box;
   -moz-box-pack:left;
   -moz-box-align:left;
   border-radius: 5px;
   padding: 2px;
   width:auto;  
}

#homenav:hover
{
   background:#D0DAFD;
   color:#333399;
}

```