There are many ways to achieve this.
First of all, right now all your content (including the header and footer) are inside a .container
with a width of 960px. You cannot get these div’s to be 100% in width when they are inside this container. So what you need to is to change your code by moving the header and footer outside of the container. I’ve created a sample here.
UPDATE!
In header.php after the body tag:
<?php st_above_header();?>
<?php st_header();?>
<?php st_below_header();?>
<?php st_navbar(); ?>
<div id="wrap" class="container">
in footer.php right before the body tag:
</div> <!-- End container -->
<?php st_before_footer();?>
<div class="inner-wrap"><?php wp_footer();?></div>
<span class="border"></span>
<?php st_after_footer();?>
</div> <!-- End page container -->
CSS:
#footer {
margin:0;
height:auto;
width:100%;
bottom:0;
/* stick to bottom */
background:#0C2044;
border-top: 7px solid #549290;
}
#header {
margin:0;
width:100%;
border-bottom: 7px solid #DD013F;
}
.inner-wrap, .inner, #megaMenu {
margin: 0 auto;
padding: 0;
position: relative;
width: 960px;
}
#page-container {
position:relative;
/* needed for footer positioning*/
margin:0 auto;
/* center, not in IE5 */
width:100%;
background:#f0f0f0;
height:auto !important;
/* real browsers */
height:100%;
/* IE6: treaded as min-height*/
min-height:100%;
/* real browsers */
}
.border {border-top: 7px solid #DD013F;width:100%; height:7px; float:left;}
#navigation {
margin: 0 0 1.5em;
width: 100%;
background: #549290;
}
#megaMenu.megaFullWidth {
width:100%;
max-width:960px;
}