HTML CSS Space Around Logo in Header

I've been trying to do this since a week but can't seem to succeed. What I'm trying to do is a responsive website and a responsive header for that website.

The header I'm trying to create has an empty space around the logo and is slightly transparent.

As you see in the picture the header is transparent and you can see the background picture AND there is a fully transparent space around the logo where you can see the background image clearly.

I've been trying to do this in Adobe Muse CC but I'm about to go nuts. I tried percentage codes in HTML/CSS but can't get it to work. I tried with putting 2 different sized rectangles around logo with the spaces but when I try the responsiveness they just fill the gaps. I tried making the logo with transparent spacing and put it in only one header but then it displays the slight blue transparent header and not directly the background.

This is the HTML:

<div class="clearfix colelem" id="pu179-3">
<!-- group -->
<div class="browser_width grpelem" id="u179-3-bw">
   <div class="clearfix" id="u179-3">
      <!-- content -->
      <p>&nbsp;</p>
   </div>
</div>
<a class="nonblock nontext MuseLinkActive clip_frame grpelem" id="u83" href="index.html">
   <!-- image --><img class="block" id="u83_img" src="images/logo.png" alt="" width="147" height="37"/>
</a>
<nav class="MenuBar clearfix grpelem" id="menuu137">
<!-- horizontal box -->
<div class="MenuItemContainer clearfix grpelem" id="u138">
   <!-- vertical box -->
   <a class="nonblock nontext MenuItem MenuItemWithSubMenu MuseMenuActive clearfix colelem" id="u141" href="index.html">
      <!-- horizontal box -->
      <div class="MenuItemLabel NoWrap clearfix grpelem" id="u142-4">
         <!-- content -->
         <p>ANASAYFA</p>
      </div>
   </a>
</div>
<div class="MenuItemContainer clearfix grpelem" id="u145">
   <!-- vertical box -->
   <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u146" href="hakkimizda.html">
      <!-- horizontal box -->
      <div class="MenuItemLabel NoWrap clearfix grpelem" id="u147-4">
         <!-- content -->
         <p>HAKKIMIZDA</p>
      </div>
   </a>
</div>
<div class="MenuItemContainer clearfix grpelem" id="u153">
   <!-- vertical box -->
   <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u154" href="%c3%bcr%c3%bcnler.html">
      <!-- horizontal box -->
      <div class="MenuItemLabel NoWrap clearfix grpelem" id="u157-4">
         <!-- content -->
         <p>ÜRÜNLER</p>
      </div>
   </a>
</div>
<div class="MenuItemContainer clearfix grpelem" id="u160">
   <!-- vertical box -->
   <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u161" href="fiyat-listesi.html">
      <!-- horizontal box -->
      <div class="MenuItemLabel NoWrap clearfix grpelem" id="u162-4">
         <!-- content -->
         <p>FİYAT LİSTESİ</p>
      </div>
   </a>
</div>
<div class="MenuItemContainer clearfix grpelem" id="u167">
<!-- vertical box -->

And this is the CSS:

#u83
{
  z-index: 22;
  width: 147px;
  margin-right: -10000px;
  left: 100px;
}

#u83_img
{
  padding-bottom: 6px;
}
#u179-3,#u179-3-bw
{
  z-index: 19;
  min-height: 43px;
}
#u138
{
  width: 134px;
  min-height: 43px;
  margin-right: -10000px;
}