Text menu on a background image - html

Question

I would like to create a text horizontal menu on a background image (e.g. similar to the top menu with logo on this website: http://bigtop.it). However, I have problems with positioning those text links relative to each other and to the background image. Here is the header part of css and html:
#header {
background-image: url(http://s6.postimg.org/3osi1wfld/starmenu.png);
margin-left: auto;
margin-right: auto;
height: 299px;
width: 893px;
background-position: 50% 50%;
background-repeat: no-repeat;
text-align: center;
}
a.header:link {
color: #000000;
font-family: passion-one;
font-size: 24px;
text-decoration: none;
font-weight: 200;
font-style: normal;
}
a.header:visited {
color: #000000;
font-family: passion-one;
font-style: normal;
font-weight: 200;
font-size: 24px;
text-decoration: none;
}
a.header:hover {
color: #348AFF;
font-family: passion-one;
font-style: normal;
font-weight: 200;
text-decoration: none;
font-size: 24px;
}
a.header:active {
font-family: passion-one;
color: #348AFF;
font-weight: 200;
font-size: 24px;
font-style: normal;
}
<div id="wrapper">
<div class="row" id="header">
<div class = "row" id="menu">
HOME
PORTFOLIO
MEDIA
CONTACT
</div>
<div class="cell">
</div>
I know that there are probably numerous ways of creating this kind of menu, but so far I cannot come up with any good one. Could you please advise me how this can be accomplished? Thank you!

Answer 1

See the solution in this link: http://codepen.io/anon/pen/KpGVBg
<div class="row" id="header">
<div class="row" id="menu">
HOME
PORTFOLIO
MEDIA
CONTACT
</div>
</div>
<style>
#header {
background-image: url(http://s6.postimg.org/3osi1wfld/starmenu.png);
margin-left: auto;
margin-right: auto;
height: 299px;
width: 893px;
background-position: 50% 50%;
background-repeat: no-repeat;
text-align: center;
}
a.header:link {
color: #000000;
font-family: passion-one;
font-size: 24px;
text-decoration: none;
font-weight: 200;
font-style: normal;
}
a.header:visited {
color: #000000;
font-family: passion-one;
font-style: normal;
font-weight: 200;
font-size: 24px;
text-decoration: none;
}
a.header:hover {
color: #348AFF;
font-family: passion-one;
font-style: normal;
font-weight: 200;
text-decoration: none;
font-size: 24px;
}
a.header:active {
font-family: passion-one;
color: #348AFF;
font-weight: 200;
font-size: 24px;
font-style: normal;
}
#menu {
margin-left: 40px;
position: absolute;
top: 175px;
}
.row a {
margin: 0 20px 0 40px;
}
.row a:nth-child(3) {
margin-left: 180px;
}
</style>