CSS navbar image issue - html

Question

I was just doing some tests with my navbar and when I wanted to put an image right before username, this happend. I don't really know what is the problem, I usually do server-side scripting but not these design. This active class on dropdown menu, as planned, needed to be together with the image, but actually it's only going to the half. If someone can give me example of what things I could put on my CSS file because there lies the problem.
Here is the image
.navbar-image {
width: 32px;
height: 32px;
position: absolute;
top: 10px;
left: -19px;
border-radius: 50%;
}
.nav-img {
position: relative;
padding-left: 50px;
}
<li class="dropdown">
<a href="#" class="dropdown-toggle nav-img" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="/uploads/avatars/{{ Auth::user()->avatar }}" class='navbar-image'>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><i class='fa fa-btn fa-sticky-note'></i>Posts</li>
<li><i class='fa fa-btn fa-user'></i>Profile</li>
<li role="separator" class="divider"></li>
<li><i class="fa fa-btn fa-sign-out"></i>Log out</li>
</ul>
</li>

Answer 1

Try
.dropdown, .dropdown-toggle, .dropdown-menu {
display: inline-block;
}
.dropdown-toggle, .dropdown-menu {
float: right;
}
.navbar-image {
width: 32px;
height: 32px;
border-radius: 50%;
}

Answer 2

Here are the fixes of your menu image:
.dropdown { position: relative; }
.navbar-image {
position: absolute;
width: 32px;
height: 32px;
top: 10px; /*** Set value as per your required ***/
right: 10px; /*** Set value as per your required ***/
border-radius: 50%;
}

Answer 3

Try this code:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.navbar-image {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 5px;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="//placehold.it/80x80/?text=%20" class='navbar-image'>
User Name <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><i class='fa fa-btn fa-sticky-note'></i>Posts</li>
<li><i class='fa fa-btn fa-user'></i>Profile</li>
<li role="separator" class="divider"></li>
<li><i class="fa fa-btn fa-sign-out"></i>Log out</li>
</ul>
</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>