I'm having trouble making a button - html

Question

I'm practicing my HTML by making a website, and I'm making a header with buttons.
I'm trying to make the button the full height of the header, but it's going out of the header for some reason, and not going to the top.
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>

Answer 1

You can reset the vertical-align(defaut is baseline) value on inline-block elements whenever needed. here vertical-align:top; will do fine :
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
vertical-align:top;
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
For a to cover the div, you may also use height or eventually line-height:
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
vertical-align:top;
}
#header-a a {
display:block;
line-height:70px;/* will size it up to 70px height for each line */
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>

Answer 2

I changed it to this code. What I did was to change the display to block (in both header-a and header-h) instead of inline-block. I then floated both elements left. Run the snippet to see it in action
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
text-align: center;
margin-top: 0px;
height: 100%;
}
#header-h {
margin-top: 20px;
}
#header-h,
#header-a {
display: block;
float: left;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>

Answer 3

Rather than setting the height of your menu bar to 70px, you could let the contents within the menu bar size its height. That way you can vertically centre the Home button. JSFiddle
HTML
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
CSS
#header {
position: fixed;
background-color: #1564B3;
color: #fff;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
background-color: #555555;
display:inline-block;
padding:30px 50px 30px 50px;
width:10%;
text-align:center;
}
#header-h {
display:inline-block;
width:30%;
text-align:center;
}
Do you see how the padding of #header-a not only vertically centres the Home text but also how the #header sizes to fit it.