HTML:
<nav class="primary-nav" role="navigation">
<ul class="primary-nav-list">
<li><a href="#" title="Item 1">Item 1</a></li>
<li><a href="#" title="Item 2">Item 2</a></li>
<li><a href="#" title="Item 3">Item 3</a></li>
</ul><!--//END .primary-nav-list-->
</nav><!--//END .primary-nav-->
CSS:
.primary-nav-list {
list-style: none;
text-align: center;
}
.primary-nav-list > li {
display: inline-block;
}
.primary-nav-list > li > a {
padding: 5px 8px;
background: #cccccc;
display: block;
text-decoration: none;
}
.primary-nav-list > li > a:hover {
background: #f9f9f9;
}
If the parent container is set as a percentage, and the window's width compromises the combined width of the inline "li" elements, they're going to drop to the next line. I suggest using media queries to detect your browser's width and reorganize the elements (responsive), or set a fixed width to the parent container.