Bootstrap pull to right and left not working

Question

Working on bootstrap navigation. The problem i am having is to pull "Logged in as Username" all the way to right and to pull the Home (forside) all the way to left because I have more menu buttoms to put in.

DEMO: http://www.bootply.com/124729

Here is the code:

default.blade.php

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
            {{-- <a class="navbar-brand" href="#">Norges Idrettshøgskole</a> --}}
        </div>
        <div class="navbar-collapse collapse">
            <p class="navbar-text pull-right">

              Logged in as <a href="#" class="navbar-link">Username</a>
            </p>
          <ul class="nav navbar-nav pull-left">

<li class='{{ ($aktiv == 'hvertime') ? 'active' : '' }}'> <a class='home' {{HTML::linkRoute('hvertime','Forside')}}</a> </li>            
<li class='{{ ($aktiv == 'hvertredjetime') ? 'active' : '' }}'> <a class='dagligmaling' {{HTML::linkRoute('hvertredjetime','Måling')}}</a </li>
<li class='{{ ($aktiv == 'gjoremal') ? 'active' : '' }}'> <a class='gjoremal' {{HTML::linkRoute('gjoremal','Oppgaver')}}</a> </li>         
<li class='{{ ($aktiv == 'dagvakt') ? 'active' : '' }}'> <a class='dagvakt' {{HTML::linkRoute('dagvakt','Dagvakt')}}</a> </li>               
<li class='{{ ($aktiv == 'kveldsvakt') ? 'active' : '' }}'> <a class='kveldsvakt' {{HTML::linkRoute('kveldsvakt','Kveldsvakt')}}</a> </li> 
<li class='{{ ($aktiv == 'kontrollcm') ? 'active' : '' }}'> <a class='kontrollcm' {{HTML::linkRoute('kontrollcm','Kontroll CM')}}</a> </li> 
<li class='{{ ($aktiv == 'sok') ? 'active' : '' }}'> <a class='sok' {{HTML::linkRoute('sok','Søk')}}</a> </li>             

  </ul>

        </div><!--/.nav-collapse -->
      </div>
    </div>

main.css

body {
 <!-- min-height: 1000px; -->
  padding-top: 70px;
    display: inline-block;
}

li:hover::after {
    content: ' ';
    position: absolute;
    border: solid 10px transparent;
    border-top: solid 0px transparent;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
    border-color: #222 transparent transparent transparent;
}

.navbar-default .navbar-nav>.active>a:before,
.navbar-nav>li>a:before {
    background-repeat: no-repeat;
    background-position: 0 top;
    content: "";
    display: inline-block;
    height: 32px;
    margin-right: 5px;
    vertical-align: middle;
    width: 30px;
}

.navbar-default .navbar-nav>.active>a.home:before,
.navbar-nav>li>a.home:before { background-image: url('../images/home.png'); }

.navbar-default .navbar-nav>.active>a.dagligmaling:before,
.navbar-nav>li>a.dagligmaling:before { background-image: url('../images/maling.png'); }

.navbar-default .navbar-nav>.active>a.gjoremal:before,
.navbar-nav>li>a.gjoremal:before { background-image: url('../images/tasks.png'); }

.navbar-default .navbar-nav>.active>a.dagvakt:before,
.navbar-nav>li>a.dagvakt:before { background-image: url('../images/sol.png'); }

.navbar-default .navbar-nav>.active>a.kveldsvakt:before,
.navbar-nav>li>a.kveldsvakt:before { background-image: url('../images/kveld.png'); }

.navbar-default .navbar-nav>.active>a.kontrollcm:before,
.navbar-nav>li>a.kontrollcm:before { background-image: url('../images/vaske.png'); }

.navbar-default .navbar-nav>.active>a.sok:before,
.navbar-nav>li>a.sok:before { background-image: url('../images/sok.png'); }

Answer 1

Here is a codepen of a bootstrap navbar with elements pulled to left and right. It looks like to me that your pull-left and pull-right are nested too deep.

If by "all the way to the left" you mean up to edge of browser, remove the .container wrapper. Here's a fork of your example for that.