Получение элементов для выравнивания по левому краю на развале навигационной панели (bootstrap)

Question

Мне бы хотелось иметь навигационную панель, где элементы по умолчанию выровнены по правому краю, но при развале навигационной панели они выровнены по левому краю.

Вот мой HTML:

<nav class="navbar">
      <div class="container-fluid" width='300px'>
        <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="index.html"><img src="img/UWCL_logo_white.png" alt="Gibbs Lab" style="width:80px;height:auto;"></a>
        </div>
        <div class="collapse navbar-collapse navbar-left " id="myNavbar">
            <ul class="nav navbar-nav navText " style='list-style-type: square'>
                <li ><a class="dropdown-divider" href="production/index.html" id="navText">About</a></li>
                <li><a href="research/index.html" id="navText">Staff</a></li>
                <li><a href="education/index.html" id="navText">Data Dashboards</a></li>
                <li><a href="people/index.html" id="navText">Current Projects</a></li>
            </ul>
    </div>
      </div>
  </nav>

Вот как выглядит моя навигационная панель:

И, когда рухнуло:

Как заставить эти элементы (на втором рисунке) выровнять по левому краю страницы? Я безуспешно пробовал следующее:

.navbar-collapse {
    text-align:left;
    float:left;
}

Спасибо.

Answer 1

Добавьте этот класс к вашему тегу ul : mr-auto