Display an Image Without Pushing Down Content - css

Question

I am using a template that was purchased to develop a site, and need to insert an image on the page without pushing the content down. Below is the link to the page I am working on:
http://www.onepropertyway.com/WorkOrder/default.aspx?woid=26&code=8lPRt3hxtg&vid=7
I recently added the following div with the logo:
<div style="margin-left:-20px; display:inline; *zoom:1;text-align:center">
<img src="/uploads/logos/8_100h.gif">
</div>`
As you can see, the content of the page is being pushed down. I'd like this image to appear in the middle just between the main green menu, and the horizontal line without pushing any content down. I tried using z-index as well, but that did not work either. I am sure this is pretty simple for a seasoned CSSer, but that's not me unfortunately!
Here is a link to the desired look:
desired look

Answer 1

Give this css to imgContainerclass.
.imgContainer {
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: -23px;
}
.row_6 {
position: relative;
}

Answer 2

use this for image set in center
.container{
position:relative;}
.absolute_logo{
width:200px;
height: 70px;
position:absolute;
left: 0;
right:0;
margin:auto;
top: -27px;
}
.absolute_logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
<div class="container">
<div class="absolute_logo">
<img src="/uploads/logos/8_100h.gif" />
</div>
</div>

Answer 3

Here is the img container:
<div class="imgContainer">
<img src="/uploads/logos/8_100h.gif">
</div>
Here is the css. This will center the img below the menu and above the horizontal line:
.imgContainer {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: center;
}
Take the padding off of the h2 "Word Order #26" and header like so. The padding is adding space above the h2 and below the menu. This removes the padding.:
header, h2 { //probably better if you make classes for these elements so you can target them
padding: 0;
}
You may want to add a class like this:
<header class="headerClass">......</header>
<h2 class="workorder">Work Order #26</h2>
.headerClass {
padding-bottom: 0;
}
.workorder {
padding-top: 0;
}