header and float issue - css

Question

My issue is this, I have a header image that is larger than my browser, I wanted to do this because I want the image to become more or less visible based on your browser width. There is a color that repeats for when your browser is bigger than the image. On top of that I have an image that is centered and then two triangles on top of that. One floating left and one floating right. My issue is this, When I change the width for the .content-outer .content-inner from 978px to 1134px to accommodate the large image over the triangles it messes with the centering of my nav bar. Here is my code. the list styling is for my nav.
<div class="content-outer" id="top_nav">
<div class="content-inner">
</div>
<div class="content-outer" id="header_map">
<div class="diamond-left">
<div class="diamond-right">
<div class="content-inner">
</div>
</div>
</div>
</div>
#header,
#header_map {
height:529px;
background:#3b96a9 url(Layer-57.jpg) top center no-repeat;
margin-bottom:45px;
overflow:visible;
}
#header .diamond-left,
#header_map .diamond-left {
width:100%;
height:529px;
overflow:visible;
float:left;
background:url(Layer-58.png) top left no-repeat;
}
#header .diamond-right,
#header_map .diamond-right {
width:100%;
height:529px;
overflow:visible;
float:right;
background:url(Layer-59.png) top right no-repeat;
}
#header_map .content-inner {
height:391px;
background:url(Layer-61.png) top center no-repeat;
position:relative;
overflow:visible; }
#header .content-inner {
position:relative;
overflow:visible;
padding-bottom:20px;
}
.content-outer
{ width:100%; float:left; overflow:visible; }
.content-outer .content-inner
{ width:978px; margin:0 auto; overflow:visible; position:relative; }
.content-outer .content-inner ul
{ margin:20px 0; padding:0; }
.content-outer .content-inner ul li
{ margin:3px 0 3px 20px; padding:0; font-size:1.1em; }
.content-outer .content-inner ul li p
{ font-size:1em; }

Answer 1

Unless I'm misunderstanding something, the code appears to be OK. Have you double-checked to make sure:
The triangle images have transparent backgrounds so you can see behind them?
The main header background is in the right location as specified in the stylesheet?
If the page is live somewhere that we can take a look, please let us know - it may be able to shed more light on your problem.