Text inside divs wrapping on top of each other when browser resize

Currently, I have a nav bar that contains divs, and inside of the divs there's text. Unfortunately, when the browser resizes it causes the text to shift and eventually they are all warped on each other. Check out the fiddle:

http://ift.tt/1BvCHya

html

<nav id= 'headWrap' class="wrapFix">  <div id= "nameCont"> Tupac Shakur
</div>

<div class="link" id="postOne"> Yo! </div>

<div class="link" id="postTwo"> About </div> 


<div class="link" id="postThree"> GitHub </div> 
<div class="link" id= "postFour"> Contact  </div> 






</nav>

css

nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: red;
    display: inline-block;
}

#nameCont {
    position:relative;
    margin-left: 3%;
    margin-right: 3%;
    display: inline-block;
}
.link {
    display: inline-block;
    margin-right:5%;
}
#postOne {
    position: absolute;
    right:40%;
    top:0;
}
#postTwo {
    position: absolute;
    right:20%;
    top:0;
}
#postThree {
    position: absolute;
    right:10%;
    top:0;
}
#postFour {
    position: absolute;
    right:0;
    top:0;
}