How to adjust width of right-aligned navbar

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">
                        <a href="#"><img class="img-responsive" src="images/oj_menu_heading.png" /></a>
                <!--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><a href="#"><img class="img-responsive" src="images/oj_menu_organisation.png" style="width:80%; height:80%"/></a>   <!--a href="#" style="color: white;">Organisation Profile</a-->
                        </li>
                        <li><a href="#"><img  class="img-responsive" src="images/oj_menu_projects.png" style="width:80%; height:80%"/></a>
                        </li>
                        <li><a href="#"><img class="img-responsive" src="images/oj_menu_news.png" style="width:80%; height:80%"/></a>
                        </li>
                        <li><a href="#"><img class="img-responsive" src="images/oj_menu_contact.png" style="width:80%; height:80%"/></a>
                        </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.