Навигация по навигационной панели в меньших разрешениях

Я пытаюсь попробовать HTML5 / CSS3 в качестве учебного процесса, но я пытаюсь создать панель навигации для ссылок на другие разделы на своих страницах. Я адаптировал код из найденного учебника, и он работает, но только при просмотре с разрешением 1080p, если ширина меньше, полоса переносится на другие строки.

Как мне убедиться, что навигационная панель занимает только одну строку (сжимается, чтобы соответствовать), независимо от того, какое разрешение использует пользователь?

img

Вот мой код CSS для навигационной панели. Обратите внимание, что под nav я установил ширину 33.3% и отступ для того же, чтобы центрировать кнопки. Я не знаю, является ли это причиной.

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; 
}

Ответы на вопрос(2)

Ваш ответ на вопрос