Positioning of image and panel in the header in HTML

The script generates a header Panel for my webpage which is displayed here:

I want the OcC field to begin at the intersection of vertical and horizontal bar as shown. I am sure a margin: attribute can help me but don’t know where to use it. Please help me and thanks.

<header>
<img src="C:/D DRIVE DATA/generic/logo.png" height="43" width="130">
height="43" width="130">
<div class="container">
<div class="row">
<nav class="navbar main-nav navbar-default ">
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="dropdown OcC">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" target="_blank" rel="nofollow" href="javascript:;">OcC </a>
</li>
<li class="dropdown CoO ">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" target="_blank" rel="nofollow" href="javascript:;">CoO </a>
</li>
<li class="dropdown Fccc">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" target="_blank" rel="nofollow" href="javascript:;">Fccc</a>
</li>
<li class="dropdown mpP">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" target="_blank" rel="nofollow" href="javascript:;">mpP</a>
</li>
<li class="dropdown iR">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" target="_blank" rel="nofollow" href="javascript:;">iR</a>
</li>
<li class="dropdown jko">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" target="_blank" rel="nofollow" href="javascript:;">jko</a>
</li></ul></li></ul></div></nav></div></div></header>