Boostrap img reposive , not getting smaller in the navbar - html

Question

Hi guys so i have a problem were i have my logo on the left hand side of my navbar and my navgation on the right hand side. Now as i am shrinking the screen i am trying to get the image to appear smaller so that the nav text and the image dont overlap each other.So basically a responsive design. However for some reason it does not seem to work at all,
I have used the class="img-fluid which boostrap says to use but it dosen't seem to work at all on the logo, so any help on this matter would be great
Fiidle Link : Here
I have used float right on the nav bar and maybe thats what messes it up? but again i am not so sure how to get the image to be resposive and get smaller as the page shrinks
P.S As you can see in the fiddle , the image actually only starts to shrink when the window gets really small, almost less then the mobile version
HTML:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<div class="logo"><img class="img-responsive" src="https://www.martialartsschoolsdirectory.com/logos/profile/checkmat-logo-burbank-ca-184.png"></div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>NAVBARA</li>
<li>NAVBARA</li>
<li>NAVBARA</li>
<li>d</li>
<li class="dropdown">
NAVBARA
<ul class="dropdown-menu">
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</li>
<li>9</li>
<li>11</li>
<li>12</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
CSS:
.navbar-nav>li>a {
line-height: 6px;
}
.navbar-nav {
float: right;
margin-top: -15px;
}
.navbar {
padding-top: 53px;
font-size: 13px;
text-transform: uppercase;
}
.navbar-default {
background-color: transparent;
border-top: 0px solid rgba(0, 0, 0, 0.5);
border-bottom: 0px solid rgba(0, 0, 0, 0.5);
border-left: 0px solid rgba(0, 0, 0, 0.5);
border-right: 0px solid rgba(0, 0, 0, 0.5);
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
height: 87px;
}
.navbar-default .navbar-nav>li>a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: #F8BD23;
text-decoration: none;
color: #ffffff;
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
}
.navbar-nav > li{
padding-left:30px;
}
body {
background-color: black;
}

Answer 1

.logo img {width:100px;}
otherwise try
add width="100" inside the img tag

Answer 2

To make it shrink you have to make it inline-block and maybe use the following on the img tag:
style="display: inline-block; height: 40px; margin-top: 40px"
You can set whatever height and width you want