How to center group of elements within div

I'm creating a banner for a website. I'm stubbornly trying to do it with HTML5/CSS3 rather than making an image. The banner has an opaque background image that spans the entire width of the page wrapper (set to 80% screen width). Over that I have three elements: a logo and two lines of text. I have placed the three where I want them my making them absolute and using top, left, etc. I also placed these three elements in their own div. I would like to center them over the background image. I've tried setting auto margins on either side (the preferred way in css3, but it's not working.

Actually, it would also be great to be able to not only center the group of three (logo, line 1, line 2) but to be able to move them around together as an absolute element. Is that possible?

http://jsfiddle.net/abalter/965Mj/1/

* HTML *

<div id="wrapper">
    <header>
        <div id="background-image"></div>
        <div id="header-group">
            <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " />
             <h1 id="line1">check it out!</h1>

             <h1 id="line2">Home Inspection</h1>

        </div>
    </header>
</div>

* CSS *

#wrapper {
    background-color: Wheat;
    width: 1280px;
    /* doing that because jsfiddle viewport is not the entire page width.*/
    /* in real life, the wrapper extends below the banner -- that is where the main part of the website is */
}
header {
    position: relative;
    width: 100%;
    height: 180px;
    background-color: White;
}
header #background-image {
    background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
}
#header-group {
    margin: 0 auto 0 auto;
}
#house-logo {
    position: absolute;
    float: left;
    height: 160px;
    top:10px;
    left: 10px;
}
#line1 {
    display: block;
    position: absolute;
    left: 220px;
    top: -15px;
    padding: 0;
    margin: 0;
    font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
    font-size: 7em;
    color: FireBrick;
}
#line2 {
    display: block;
    position: absolute;
    left: 185px;
    bottom: 1px;
    margin: 0;
    padding: 0;
    font-family:"Trebuchet", sans-serif;
    font-size: 4em;
}

Solution

#wrapper {
background-color: Wheat;
width: 1280px;
/* doing that because jsfiddle viewport is not the entire page width.*/
/* in real life, the wrapper extends below the banner -- that is where the main part of the website is */
}
header {

width: 100%;
height: 180px;
background-color: White;
margin:0 auto;
}
header #background-image {
background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
text-align: center;
 display: table;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.3;
}

#house-logo {
 display: table;
float: left;
height: 160px;
padding-left: 10em;


}
#line1 {
display: table;

text-align: center;
padding: 0;
margin: 0;
font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
font-size: 7em;
color: FireBrick;
}
 #line2 {



    margin: 0;
    padding-right: 6em;
    font-family:"Trebuchet", sans-serif;
    font-size: 4em;
}

AND

<div id="wrapper">
<header>
    <div id="background-image">

 <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " />
         <h1 id="line1">check it out!</h1>

         <h1 id="line2">Home Inspection</h1>

    </div>
</header>
</div>

/////////////////// EDIT GEARED TOWARDS COMMENT //////////////////

 <!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>

<body>
 <div id="wrapper">
    <header>
        <div id="background-image"></div>
        <div id="header-group" >
            <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " />
             <h1 id="line1">check it out!</h1>

             <h1 id="line2">Home Inspection</h1>

        </div>
    </header>
  </div>

</body>
</html>

AND .......

#wrapper {
background-color: Wheat;
width: 1280px;
}   
header {

width: 100%;
height: 215px;
background-color: White;
}
header #background-image {
background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
height: 215px;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.3;
position: absolute;

}
#header-group {
margin: 0 auto;


}
#house-logo {

float: left;
height: 160px;
padding-left: 30%;    
}
#line1 {

padding: 0;
margin: 0;
font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
font-size: 7em;
color: FireBrick;
}
#line2 {


display:inline;
font-family:"Trebuchet", sans-serif;
font-size: 3.7em;
}

NOTE: that it isn't perfectly fitted to the code you provided. I had to extend the height of the header to 215px to fit the "line2" you can try and fiddle with line 2 css if you need to have a smaller height size.