WP css issue with main images

i have this issue where on the home page the big 2200x400 image is perfect..then in the subpages when i put another image in "featured image" those images move over to the right.

i see in my css that nothing is pushing that image to the right... here is my code in css...can someone please advise?

/* begin Header */
div.hh-header
{
margin: 0 auto;
position: relative;
z-index: -5;
width:100%;
height: 400px;
margin-top: 0;
margin-bottom: 0;
}
.hh-header-position
{
position: absolute;
top: 0;
right: 0;
left: 0;
}

.hh-header-wrapper
{
position: relative;
top:0;
width:1050px;
margin:0 auto;
}
.hh-header-inner
{
position: relative;
margin: 0 0;
}

.hh-header:after
{
position: absolute;
z-index:-1;
display:block;
content:' ';
top: 0;
width:100%;
height: 400px;
background-image: url('images/header1.jpg');
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */

/* begin Header - featured image */
div.hh-header-noimage
{
margin: 0 auto;
position: relative;
width:100%;
height: 400px;
margin-top: 0;
margin-bottom: 0;
}

.hh-header-noimage:after
{
position: absolute;
z-index:-1;
display:block;
content:' ';
top: 0;
width:100%;
height: 400px;
/* background-image: url('images/header1.jpg'); */
background-repeat: no-repeat;
background-position: center center;
}
/* end Header - featured image */

 

here is the link... http://carterronnie.wp.hobbsherder.com/

 

.hh-header-noimage:after
{
position: absolute;
z-index:-1;
display:inline-block;
content:' ';
top: 0;
width:100%;
height: 400px;
/* background-image: url('images/header1.jpg'); */
background-repeat: no-repeat;
background-position: center center;
}
/* end Header - featured image */

Try changing "display: block" to "display: inline-block". See if that works.

 

thanks wagner...i tried inline-block and it didn't work. i did however specify hh-header-noimage:after for each of the 9 images. it worked. thank you!

 

actually it's not working ...i tried display:inline-block; but it didn't work and rather than referencing each header image in the CSS..i put it in as a featured image in each page and now it's misaligned as you can see here on the about page... http://www.ronniecarter.com/about-ronnie-carter-central-florida-real-estate/

notice how the logo and his cutout veers towards the right and when i stretch and shrink the browser, the logo and his cutout moves...and that's because the actual header image is top left. i did put in the css background-position as center center and it's still not working.

 

anyone?

 

if someone can help me with this..i'll pop in some cash via paypal...

 

PM me and I will help you.ASAP