Как выровнять название бренда и ссылки, оставленные в навигационной панели Bootstrap?

Я новичок в Bootstrap, и я работал над знакомством с навигационной панелью. Я заметил, что когда браузер имеет полную (широкоэкранную) ширину, название бренда и навигационные привязки остаются в направлении к левому центру страницы, а не выравниваются по левому краю страницы, как это происходит, когда окно меньше. Как сделать так, чтобы текст в панели навигации обнимал левую часть страницы? Независимо от того, насколько широким становится окно браузераМне бы хотелось, чтобы он оставался слева от окна. Есть ли особая причина не делать этого?

Вотживое демо на jsFiddle, Обратите внимание, что если вы потяните ручку и максимально увеличите область просмотра влево, текст в конечном итоге переместится к центру навигационной панели.

Моя разметка navbar такая же, как и в стартовой демоверсии, поставляемой с начальной загрузкой, я знаю, что адаптивные функции и значки не отображаются.Я подключен к скрипке, но они работают над моим локальным проектом и не имеют отношения к данному вопросу. Я предполагаю, что мне нужно выровнять текст по левому краю моего пользовательского CSS, однако мои попытки применить это потерпели неудачу. Любая помощь приветствуется.

    
      
        
          <a class="brand" href="#">Project name</a>
          
            
              <a href="#">Home</a>
              <a href="#about">About</a>
              <a href="#contact">Contact</a>
            
          
        
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>