Nawijanie paska nawigacyjnego na mniejsze rozdzielczości

Próbuję swoich sił w HTML5 / CSS3 jako procesie uczenia się, ale staram się stworzyć pasek nawigacyjny dla linków do innych sekcji na moich stronach. Dostosowałem kod z znalezionego samouczka i działa, ale tylko przy oglądaniu w rozdzielczości 1080p, jeśli szerokość jest mniejsza, pasek zawija się na inne linie.

Jak mogę się upewnić, że pasek nawigacyjny zajmuje tylko jedną linię (zmniejsza się, aby zmieścić) bez względu na rozdzielczość używaną przez użytkownika?

Oto mój kod CSS dla paska nawigacyjnego. Należy pamiętać, że pod nav ustawiłem szerokość na 33,3% i dopełnienie do tego samego, aby wyśrodkować przyciski. Nie wiem, czy to jest przyczyna.

nav {
    display:block;
    position: absolute;
    left:0; 
    white-space:nowrap; 
    margin: 0 auto; 
    width: 33.3%; 
    background-color:#ff6600;
    padding-left: 33.3%; 
    padding-right: 33.3%; 
} 

nav ul { 
    margin: 0 auto; 
    width: 100%; 
    list-style: none;
    display: inline;
    white-space:nowrap; 
} 

nav ul li { 
    float: left;
    position: relative;
    white-space:nowrap; 
} 

nav ul li a { 
    display: block; 
    margin: 0 auto; 
    width: 150px; 
    font-size: 16px;
    font-family: century gothic; 
    line-height: 44px; 
    text-align: center; 
    text-decoration: none; 
    color:#575757;
    white-space:nowrap; 
} 

nav ul ul { 
    width: 200px;
    position:absolute; 
    top:-99999px; 
    left:0; 
    opacity: 0; 
    -webkit-transition: opacity .4s ease-in-out; 
    -moz-transition: opacity .4s ease-in-out; 
    -o-transition: opacity .4s ease-in-out; 
    transition: opacity .4s ease-in-out; 
    z-index:497; 
    background:#333; 
    padding: 2px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
}


nav ul ul li a { 
    display: block;
    width: 200px;
    text-align: left;
    padding-left: 3px;
    font-size: 14px;    
}   



nav ul li:hover>ul{
    opacity: 1; 
    position:absolute; 
    top:98%; 
    left:0;

}


nav ul li a:hover { 
    color: #fff;
    background-color: #cc3300 
} 

nav ul li.selected a { 
    color: #fff; 
    background-color: #cc3300; 
}

questionAnswers(2)

yourAnswerToTheQuestion