Font breaks responsive design? - html

Question

I'm having a problem with a design I'm coding that I intend to make creative. Right now, I have a header that has 3 separate areas, one div in the middle with 30% width and two on either side with 35%. In these I contain my header elements. The middle one contains my logo, which scales just fine. When I re size the window it scales down and maintains it's positioning inside the div.
The problem arises when I try to add the navigation on either side. I have the navigation text inside the first div currently, and it doesn't behave how I intend it to. I have it relatively positioned and it doesn't maintain that positioning. When the browser is re-sized the text remains fixed, so at some point, as the divs grow smaller, the text is completely outside it's containing div. Also, at some point the text begins to stack instead of maintaining it's in-line style. I have a separate style sheet that has a few font size media queries to remedy this, they simply drop the font size at certain intervals, but this doesn't do anything. The text gets smaller, but still remains fixed on re-size and breaks out as well as begins to stack.
I simply cannot figure out why this is happening. The logo image remains perfectly in it's div and maintains it's position whilst the text doesn't move at all. I guess I'm just not understanding text properties as well as I need to I've included the HTML and CSS below, I left out the media queries as it's pretty self explanatory.
<div id=container>
<div id=header>
<div id=headerone>
<div id=leftnav>
<ul>
<li>Home</li>
<li>Services</li>
</ul>
</div>
</div>
<div id=headertwo>
<img src="images/title.png">
</div>
<div id=headerthree>
</div>
</div>
and the CSS
html, body {
width: 100%;
height: 100%;
margin:0;
font-size: 100%;
padding:0;
}
img {
max-width:100%;
width: 100%;
}
ul {
list-style: none;
}
ul li{
text-decoration: none;
color: white;
display: inline-block;
padding: 20px;
}
#container{
width: 100%;
height: 100%;
}
#header{
background-size: auto 100%;
width: 100%;
height: 19.1%;
background-image: url(images/headerbg2.jpg);
}
#header img{
width: 70%;
position: relative;
left: 15%;
top: 30%;
}
#headerone{
width: 35%;
height: 100%;
float: left;
background-color:black;
}
#leftnav{
word-break:keep-all;
font-size: 1.5em;
position: relative;
left:10%;
top: 40%;
font-family:Rockwell Extra Bold, Georgia, "Times New Roman", Times, serif
}
#headertwo{
width: 30%;
height: 100%;
float: left;
}
#headerthree{
width: 35%;
height: 100%;
float: left;
background-color:green;
}
I appreciate any help.