How to avoid these overlapping elements - css

Question

I was toying with some made code on codepen, trying to get used to html/css since I am not really comfortable on the positioning. This must be pretty silly but I can't make it work.
HTML:
<div id="hh">
<h1>Wacom Hover Effect</h1>
</div>
<div id="cl">
Read More
Learn More
Read Article
Download
</div>
CSS:
*, :before, :after{ #include box-sizing('border-box'); }
body{ padding: 1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #eee; }
#hh{
position:absolute;
left:50%
}
h1{
position:relative;
left:-50%;
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
#cl{
clear:both;
}
.button,
[class*="button-"]{
position: relative;
display: inline-block;
overflow: hidden;
float:left;
margin: 0 1em 1em 0;
padding: 0 4em;
height: 3.5em;
font: 300 1em/3.5em 'Open Sans', sans-serif;
text:{
decoration: none;
shadow: 0 1px 3px rgba(black, .35);
}
letter-spacing: .08em;
color: #fff;
background: #0090C0;
border: solid 1px #fff;
border-radius: 2px;
#include transition(.35s ease all);
}
}
There is some irrelevant code after that about hovering etc.
The result is this: http://codepen.io/roygbiv/full/FjLcA
So I wanted h1 at center and I found here the method of putting #hh absolute, left:50% and then h1 relative left:-50%. And it screwed up the positioning.
What I want is h1 on center top, then the 4 "a"s under it (not center, just not overlapping).

Answer 1

Putting position: absolute on an element makes all other elements ignore it. This can be solved by putting display: inline-block on the h1 and text-align: center on #hh:
Check new pen: http://codepen.io/anon/pen/kovaC
#hh {
text-align: center;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
display: inline-block;
}
inline-block makes the element's box adapt to the width of its text. I presume the desired look of the header is for the blue box to not be 100% width, which is otherwise the case with h1 and other block elements.

Answer 2

i have done the following modification in css and it is working as expected:
#hh{
text-align: center;
margin-left:auto;
margin-right:auto;
width:40%;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}