Using z-index and position values to align divs - html

Question

I'm trying to create a banner which spans the page width. A centered container measuring 1130px within this region holds five blocks of color at 20% of the container. Behind this container should be two divs at 50% each - one containing the first color swatch and the other containing the last to create a seamless palette but maintain the same width.
The issue I'm having at the minute is that the .modal-container which holds the five colour blocks will not display on top of the two background blocks .modal-left and .modal-right. I've tried tinkering with the z-index values of all three classes to no avail. position: absolute isn't an option either as this knocks the margin: 0 auto alignment off. Any ideas?
JSFiddle
The effect I'm looking for

Answer 1

EDIT:
I just got really carried away and did a total overhaul on that code. I'M SORRY I COULDN'T HELP MYSELF LOL
New and improved ya dig.
Your HTML simply needed some re-arranging. The inner div placed above the other two fixed it right up.
CSS (updated):
.modal {
background-image: -webkit-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -moz-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -ms-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -o-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: linear-gradient(to left, #3e454c 50%, #ff7f66 50%);
background-size: cover;
background-attachment: fixed;
background-position: left top;
background-repeat: no-repeat;
height: 54px;
width: 100%;
max-width: 1130px;
}
.modal-inner {
position: relative;
max-width: 1130px;
}
.modal-block {
float: left;
width: 20%;
height: 27px;
}
.una {
background: #3e454c;
background: rgba(62, 69, 76, .5);
}
.dos {
background: #2185c5;
background: rgba(33, 133, 197, .5);
}
.tres {
background: #7ecefd;
background: rgba(126, 206, 253, .5);
}
.cuatro {
background: #fff6e5;
background: rgba(255, 246, 229, .5);
}
.cinco {
background: #ff7f66;
background: rgba(255, 127, 102, .5);
}
HTML (less is more :) ):
<div class="modal">
<div class="modal-inner">
<div class="modal-block una"></div>
<div class="modal-block dos"></div>
<div class="modal-block tres"></div>
<div class="modal-block cuatro"></div>
<div class="modal-block cinco"></div>
</div>
</div>

Answer 2

See demo here http://jsfiddle.net/Godinall/cq27S/3/
First, re-arrange your divs to put the 50/50 underneath
Second, and most importantly, add this to .modal-inner
I believe this is better solution than setting position/margins
display:block;