Q: 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:
https://jsfiddle.net/6jvxLr4k/4/
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;
}


A: position:absolute will do that. Just give the elements inside .wrapFix a percentage width to position them.
Here is the updated css https://jsfiddle.net/6jvxLr4k/7/
