Съезжает вниз правый элемент navbar в Bootstrap 3

Добрый день! Уже 3 сутки, наверное, пытаюсь найти косяк, из-за которого правый элемент съезжает. Много всего перепробовал - не помогает  Вообще я сетевик, а тут начальство решило, что всё работает хорошо и попросило сделать знакомым сайт. Вот и мучаюсь :?:

Прошу обрезку правого элемента записью в css overflow:hidden; не предлагать - хотелось бы просто сжатия или красивого переноса на следующую строку.

<div id="main-nav" class="navbar navbar-fixed-top nvclr">

         <div class="container">


            <div class="navbar-header">


               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">

                  <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

               </button>


            </div>


            <div id="site-nav" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">

               <ul class="nav navbar-nav" id="top-menu">

                  <li class="active menu-item">

                     <a href="#services" class="scrollto">Почему это работает?</a>

                  </li>

                  <li class="menu-item">

                     <a href="#about" class="scrollto">Что входит в курс?</a>

                  </li>

                  <li class="menu-item">

                     <a href="#portfolio" class="scrollto">Что это даёт?</a>

                  </li>

                  <li class="menu-item">

                     <a href="#contact" class="scrollto">Как проходит обучение и как его начать?</a>

                  </li>

               </ul>

            </div><!--End navbar-collapse -->


         </div><!--End container -->


      </div><!--End main-nav -->

Стиль: 

    

#main-nav .container{

    padding:15px 0;

    -webkit-transition:padding 0.3s ease-out;

    transition:padding 0.3s ease-out;

    height: 80px;

}

#main-nav.nvclr {

    background: #2a638b;

    box-shadow:0 1px 2px rgba(0,0,0,0.1);

}

#main-nav.nvclr .container{

    padding:0;

}

ul.nav a:hover, ul.nav a:focus  { background-color: #2a638b !important; }

.navbar {background-color: #2a638b;}

@media only screen and (max-width: 766px) {

.collapsing, .in {background-color: #2a638b;}

}

.navbar .navbar-nav {

  display: inline-block;

  float: none;

  margin-top: 14px;

  vertical-align: top;

}

.navbar .navbar-collapse {

  text-align: center;

}

#main-nav .navbar-toggle {

color: #777;

border-color: #777;

    

}

#main-nav .navbar-toggle .icon-bar {

background: #777;

}

.navbar-toggle .icon-bar {

display: block;

width: 22px;

height: 2px;

border-radius: 1px;

}

А вот что получается при стягивании окна на скриншоте, а хотелось бы, чтобы вот ссылка.

Заранее спасибо

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

Учитеcь пользоваться поиском, в сети полно примеров. Тут все детально расписано: ссылка
Зачем так усложнять себе жизнь лишними блоками? 
Ну а если лень переделывать замените 
 <ul class="nav navbar-nav" id="top-menu">
на
 <ul class="nav nav-justified" id="top-menu">
должно помочь, если я вас правильно понял.
и если нужно что-бы длинный пункт был в одну строку без переноса слов добавьте в стили 
.nav>li>a{white-space: nowrap;}

FLAKE_MDM, спасибо большое, первый способ помог. Осталось по вертикали их выравнять, но, думаю, с этим справлюсь без проблем)

floppox, я тут буквально пару часов назад про jsfiddle узнал, извините. 
Вот для примера интересную штуку сделал, анимация силами css ссылка