Q:

Aligning the user-icon and user-name to left

I have a drop-down at the right with a icon, user-name and a right arrow. Its not getting aligned properly.
<div class="rightBox pull-right" href="#">
 <ul class="navbar-nav navbar-right">                 
   <li class="dropdown">
   <li style="margin-top: 3px">
       <i class="fa fa-2x fa-border fa-user"></i>
   </li>
   <li>
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     <label class="navbar-text" style="margin-top: 5px;margin-left:0;">
     <strong><h4>
        <span>Shane Watsoner</span>
        <b class="glyphicon glyphicon-chevron-down"></b>
      </h4></strong>
     </label>
    </a>
  </ul>
 </div>

Below is the fiddle which reproduces the issue and also added the screen-shot on how it should look like. But currently it looks different.
http://jsbin.com/nulazoki/18

A:

To position your field on the left and align it to the left, you need not use navbar-right class, you can rather use navbar-left like below:
  <div class="navbar-collapse collapse">        
      <ul class="navbar-nav navbar-left">
          <li class="dropdown">
              <!-- All the rest of your content -->
          </li>
      </ul>
  </div>  

After doing the above, it still would not get perfectly aligned to the left because there are some margins and padding added. To nullify these you can add the below code.
.navbar-collapse{
  padding: 0;
}
.navbar-left{
  margin: 0;
  padding: 0;
}

Side Note: Your output doesn't show up in the edit version probably because your output comes up only in wide screen mode and during edit the other tabs like HTML/CSS/JS are being shown which makes the output screen not be full width.
JS Bin Demo

