I added an image on my navigation bar but this image position is not set. So I try to set through margin. When I add `margin-right:20px` then "events" title goes to the right side but I want to set position of image right side.

Image what I try:

[![image 1](https://i.stack.imgur.com/JxqqZ.jpg)](https://i.stack.imgur.com/JxqqZ.jpg)

Image what I want:

[![image 2](https://i.stack.imgur.com/KiZ4a.jpg)](https://i.stack.imgur.com/KiZ4a.jpg)

```css
.lefttabs{
  background-color:#1E1E1E;
  color:White;
  font-family:Calibri;
  font-weight:bold;
  font-size:medium;
  width: 187px; 
  height: 100%;
  z-index:1;/* Stay on top */
  padding-top: 60px; 
  /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.lefttabs a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  font-size:medium;
  color:White;
  width: 133px;
  margin-left: 0px;
}
.lefttabs ul{
  list-style:none;
  margin:0px 20px 0px 0px;
  border:1 px solid;
  border-color:Black;
}
.lefttabs li{
  list-style:none;
}
.lefttabs li  a {
  list-style:none;
  display:block;
  padding: 0px 0px 30px 0px;
  padding-left: 10px;
  padding-top: 10px;
} 
.lefttabs a:hover,.offcanvas a:focus{
  color: green;
  background-color:White;
  border-bottom-color:Red;
  color:#000!important;
  border:1px solid;
}
.imga{
  margin-right:20px;
}
```

```html
<div class="lefttabs">
  <ul>
    <li>
      <a href=""> <img class="imga" alt="" src="images/eve.bmp" border="0" />EVENTS</a>
    </li>
  </ul>
</div>
```