How to adjust width of right-aligned navbar - css

Question

Link to jsfiddle: https://jsfiddle.net/ckmmd5aL/
This is my bootstrap HTML
<div class="img-full">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<img class="img-responsive" src="images/oj_menu_heading.png" />
<!--a class="navbar-brand" href="#" style="color: white;">Parwest</a>
<a class="navbar-brand" href="#" style="color: white;">Group</a-->
</div>
<div id="navbar" class="navbar-collapse navbar-right collapse">
<ul class="nav navbar-nav">
<li><img class="img-responsive" src="images/oj_menu_organisation.png" style="width:80%; height:80%"/> <!--a href="#" style="color: white;">Organisation Profile</a-->
</li>
<li><img class="img-responsive" src="images/oj_menu_projects.png" style="width:80%; height:80%"/>
</li>
<li><img class="img-responsive" src="images/oj_menu_news.png" style="width:80%; height:80%"/>
</li>
<li><img class="img-responsive" src="images/oj_menu_contact.png" style="width:80%; height:80%"/>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</div>
and this is the css
.img-full {
height: 450px;
background-image: url('images/oj_header.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
.navbar {
margin-top: 20px;
background: no-background;
}
.navbar.navbar-default {
background-color: transparent;
border-color: transparent;
}
and this gives me this result
but I want to reduce the gap between the right navbar items such that I get this layout
Can anyone please tell me how to reduce the gap and further right align the navbar items to get the required layout?
Any help would be appreciated. Thanks in advance.

Answer 1

I'd use Bootstrap's grid as it was intended.
<div class="col-sm-4">
Logo
</div>
<div class="col-sm-8">
Navbar
</div>
Demo
In addition, I've removed the nested container and applied top positioning to the background image.