Раскрывающееся меню начальной загрузки в панели навигации: выравнивайте значки по горизонтали, а не по вертикали

Question

при первой публикации в StackOverflow и новом разработчике, пожалуйста, будьте осторожны со мной: -)

Я использую bootstrap для создания панели навигации на моем сайте, и у меня возникла проблема с раскрывающимся меню свертывания.

Снимок экрана рабочего стола Поскольку это мой первый пост, изображения не могут быть встроены. Как видите, у меня логотипы красиво выровнены по правой сторонесторона навигационной панели.

Мои проблемы в том, что при просмотре на экране мобильного телефона или экрана меньшего размера значки выглядят грязно при вертикальной компоновке. Меньший скриншот порта просмотра

В идеалеЯ хотел бы, чтобы значки оставались на одной линии таким образом, чтобы не ставить под угрозу общий стиль их отображения в режиме полного рабочего стола. Вот мой HTML-код, все с использованием Bootstrap, CSS не были изменены: `

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="600">
   <div class="container-fluid" id="navbarText">
   <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#" id="zara"></a>
            </div>
            <div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav" id="nav-options">
                        <li><a href="#section1">About</a></li>
                        <li><a href="#section2">Tools</a></li>
                        <li><a href="#section3">Portfolio</a></li>
                        <li><a href="#section4">Contact</a></li>
                    </ul>


                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="mailto:email@address"><span class="fa fa-envelope"></span></a>
                        </li>
                        <li><a><span class="fa fa-phone"></span></a>
                        </li>
                        <li><a href="https://www.linkedin.com/my-profile"><span class="fa fa-linkedin"></span></a>
                        </li>
                        <li><a href="#"><span class="fa fa-github"></span></a></li>
                    </ul>


                </div>
            </div>
        </div>
    </nav>

`

Большое спасибо за любую помощь.