Bootstrap navbar spacing on right - html

Question

In my bootstrap web app, on the navigation bar header, there is no space on the right hand side. And the logout link is very close to the right border.
How can I give some space on the right ?
Image:
index.html
<!-- Start of Navigation Menu -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="listController">
<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" rel="home" href="#/list">My Project</a>
</div>
<div class="collapse navbar-collapse">
<div class="bgContainer" style="background-image: url('images/bg_header.gif');">
<ul class="nav navbar-nav">
<li><i class="glyphicon glyphicon-registration-mark"></i>List</li>
<li><i class="glyphicon glyphicon-fire"></i> Two</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-leaf"></i> Calendar <b
class="caret"></b></a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li><i class="glyphicon glyphicon-eye-open"></i> View Submission </li>
<li><i class="glyphicon glyphicon-eye-open"></i> View Submission </li>
<li><i class="glyphicon glyphicon-calendar"></i> Report </li>
<li><i class="glyphicon glyphicon-list-alt"></i> Template - </li>
<li><i class="glyphicon glyphicon-book"></i> Calendar</li>
<li class="dropdown-submenu"><a tabindex="-1"> <i class="glyphicon glyphicon-cog"></i>Generate
</a>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-cog"></i> Report </li>
<li><i class="glyphicon glyphicon-cog"></i> Draft </li>
</ul></li>
<li><i class="glyphicon glyphicon-eye-open"></i> Feedback</li>
</ul></li>
<li><i class="glyphicon glyphicon-blackboard"></i> Dashboard</li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a class="dropdown-toggle" role="button" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i>
{{fullName}} <span class="caret"></span></a>
<ul id="g-account-menu" class="dropdown-menu" role="menu">
<li>My Profile</li>
</ul></li>
<li><i class="glyphicon glyphicon-lock"></i> Logout </li>
<!-- Spacer -->
<li> </li>
</ul>
</div>
</div>
</div>
</div>
<!-- End of Navigation Menu -->

Answer 1

This might be caused by .navbar-right class due to positioning or overflow issues with navbar container.
Default bootstrap rule:
.navbar-right {
margin-right: -15px;
}
Override it with:
.navbar-right {
margin-right: 0;
}

Answer 2

Thanks guys.
I just added a white space to the last menu item using
<li><i class="glyphicon glyphicon-lock"></i> Logout </li>