Margin being added on h2 - html

Question

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/

Answer 1

H2 elements are block-level so it will always try to fill 100% of the width on the "line" unless you tell it not to.
Just add float:left to your h2 styling and you should be good.

Answer 2

I think you're looking for something like this.
#zip_h2
{
width: 50%;
margin: 0 auto;
text-align: center;
}
OR
#zip_h2
{
width: auto;
text-align: center;
}

Answer 3

try it like this:
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>
CSS:
.day_buttons
{
position: relative;
}
.day_buttons h2
{
text-align: center;
}
.day_buttons button
{
position: absolute;
top: 10px;
}
.day_buttons #previous_day
{
left: 0;
}
.day_buttons #next_day
{
right: 0;
}

Answer 4

Just a small Change
top: 0;
right: 0;
Working Fiddle

Answer 5

Changes in the CSS :
For the right button
#next_day
{
position: absolute;
float: right;
top: 10px;
right: 10px;
background: transparent url(right.jpg) no-repeat top left;
width:4em;
height:4em;
z-index:5;
}
For the heading
#zip_h2
{
margin:0px !important;
padding-left: 20px;
padding-right: 70px;
text-align: center;
overflow:hidden;
}