Images on header not aligned correctly

Ok I am at a loss as to how to take the two side images on my header and spread them farther apart. The site is at http://foxdenwebsolutions.com/discriminatingladyjewelry/index.html. I tried using the inspect mode of Chrome and when I move it over by using a negative value, part of the image disappears. The site is responsive and I am using the 1140 grid framework. Don’t pay attention to the smaller versions as I have not fixed those yet. The header container is more than 960 pixels and so is the row element. I just don’t understand what I am doing incorrectly. The logo is also sitting on the header. If you have a more efficient way of handling all three, please let me know so I can get this done for the client. She wanted something on the header besides the logo as it looked bare to her. Thanks.

Hi, cgacfox. Let me suggest a couple of changes.

In your HTML page, change div “container header” so it looks like this:


<div class="container header">
    <div class="row">
    	<div class="flourish1"></div> <!--flourish-->
        <div class="flourish2"></div> <!--flourish-->
        <div class="logo"><h1>Discriminating Lady Jewelry</h1></div> <!--logo-->
    </div> <!--row--> 
</div> <!--container header-->

In style.css, make the following changes:

Line 64


.header .logo {
    width: 435px;
    height: 412px;
    background: url(http://foxdenwebsolutions.com/discriminatingladyjewelry/images/logo.png) no-repeat;
    [color=red][s]margin-left: 340px;[/s][/color]    /* DELETE ME */
    [color=blue]position:relative;[/color]     /* ADD ME */
    [color=blue]margin:0 auto;[/color]         /* ADD ME */
}

Line 86


.flourish2 {
    background: url(http://foxdenwebsolutions.com/discriminatingladyjewelry/images/header_flourish2.png) no-repeat;
    height: 370px;
    width: 214px;
    float: right;
    margin-top: [color=blue]29px[/color];    /* CHANGED FROM -385px */
}

The indents in the HTML were a little confusing. Re-indenting made the solution clear.

The floating flourishes need to preceed the non-floating Jewelry Lady in HTML.

Both flourishes have the same properties, except that flourish1 floats left and flourish2 floats right.

The Jewelry Lady is given {margin:0 auto;} so she is centered on the page. {position:relative} will keep her above the flourishes, should the page narrow that much.

Thank you, ronpat. I appreciate your help and guidance. Now on the changing things for different devices. Smaller devices will not have all the background images because of bandwidth complications. I will opt for just the background colors.