On the navigation bar header of my Bootstrap web app, I am facing an issue where there is no space on the right-hand side and the logout link is very close to the right border.
How can I adjust the spacing on the right?
Image:
https://i.sstatic.net/tYbHA.png
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><a href="#/list"><i class="glyphicon glyphicon-registration-mark"></i>List</a></li>
<li><a href="#/two"><i class="glyphicon glyphicon-fire"></i> Two</a></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><a href="#/"><i class="glyphicon glyphicon-eye-open"></i> View Submission </a></li>
<li><a href="#/"><i class="glyphicon glyphicon-eye-open"></i> View Submission </a></li>
<li><a href="#/"><i class="glyphicon glyphicon-calendar"></i> Report </a></li>
<li><a href="#/"><i class="glyphicon glyphicon-list-alt"></i> Template - </a></li>
<li><a href="#/"><i class="glyphicon glyphicon-book"></i> Calendar</a></li>
<li class="dropdown-submenu"><a tabindex="-1"> <i class="glyphicon glyphicon-cog"></i>Generate
</a>
<ul class="dropdown-menu">
<li><a href="#/"><i class="glyphicon glyphicon-cog"></i> Report </a></li>
<li><a href="#/"><i class="glyphicon glyphicon-cog"></i> Draft </a></li>
</ul></li>
<li><a href="#/"><i class="glyphicon glyphicon-eye-open"></i> Feedback</a></li>
</ul></li>
<li><a href="dashboard"><i class="glyphicon glyphicon-blackboard"></i> Dashboard</a></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><a href="#/underConstruction">My Profile</a></li>
</ul></li>
<li><a href="#/underConstruction"><i class="glyphicon glyphicon-lock"></i> Logout </a></li>
<!-- Spacer -->
<li> </li>
</ul>
</div>
</div>
</div>
</div>
<!-- End of Navigation Menu -->