Margin being added on h2

I am trying to create a div that has a button on the left, right and then a header in between. Something that looks like this:

But I'm getting something like this:

You can see that there is a margin being added and I can't figure out why. I have inspected everything I can, and I can't figure out what I'm doing wrong. (I understand that the h2 is at 50%. I did this to try and figure out why the right button was being pushed down.)

Here is my HTML:

    <div class="day_buttons">
            <button id="previous_day"></button>
            <h2 id="zip_h2">What day and time would you like your stuff picked up?</h2>
            <button id="next_day"></button>
    </div><!--end nav_buttons--> 

Here is the CSS to go with it:

#next_day
{
    float: right;
    background: transparent url(./images/icons/forward_button.gif) no-repeat top left;
    width:4em;
    height:4em;
    z-index:5;

}

#previous_day
{
    position:relative;
    top:0;
    left:0;
    float: left;
    background: transparent url(./images/icons/backward_button.gif) no-repeat top left;
    width:4em;
    height:4em;
    z-index:5;
}
.day_buttons
{
    height:3em;
    width:100%;
    display:inline-block;
}

#zip_h2
{
    width: 50%;
    margin:0px !important;
    overflow:hidden;
}

Here is a Fiddle for those who need it: http://jsfiddle.net/tK72Z/