header navigation line breaks - html

Question

I have a site header created with floating divs using this structure:
nav {
height:inherit;
width:100%;
margin:0 auto;
position:relative;
z-index:10;
text-align: center;
}
#nav-wrap {
min-width: 100%;
width: auto !important;
width:100%;
white-space:nowrap;
}
nav ul#nav-left, #nav-right {
list-style-type:none;
display:inline-block;
margin:0;
padding:0;
width:auto;
height:100%;
}
nav img {
display:inline-block;
padding:0;
margin:0;
max-height:225px;
vertical-align:top;
}
nav ul li {
display:inline-block;
text-align:center;
font-family: 'Oswald',helvetica,arial,sans-serif;
font-size:1.8rem;
font-weight:400;
padding:0 30px;
margin-top:30px;
}
<nav>
<div id="nav-wrap">
<ul id="nav-left">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
</ul>
<img src="assets/img/img.png" />
<ul id="nav-right">
<li>Option4</li>
<li>Option5</li>
<li>Option6
</li>
</ul>
</nav>
Updated
I've been playing with layout and the floats were making things tough. So, it's all displayed as inline-block without floats, but the center logo still isn't resizing and I can't figure out what I'm doing wrong. Take a look at the staged site linked below to see what I'm going for. The logo overlap is intentional.
Staged site
I appreciate any help or suggestions. I'd like to avoid using display:table if possible.

Answer 1

#media queries is the thing you needed.
#media (max-width: 700px) {
nav ul li {
font-size:1.3rem;
padding:0 10px;
}
}
#media (max-width: 1200px) {
nav ul li {
font-size:1.5rem;
padding:0 20px;
}
}
#media (min-width: 1201px) {
nav ul li {
font-size:1.8rem;
padding:0 30px;
}
}
#media (max-width: 400px) {
nav ul li {
/*For this you need to use mobile friendly menu **/
}
}