Cum să modifici antetul și subsolul la lățime completă?

Există multe modalități de a realiza acest lucru.

În primul rând, în prezent tot conținutul tău (inclusiv antetul și subsolul) se află într-un .container cu o lățime de 960px. Nu poți face ca aceste div-uri să aibă o lățime de 100% atunci când sunt în interiorul acestui container. Deci, ceea ce trebuie să faci este să modifici codul prin mutarea antetului și subsolului în afara containerului. Am creat un exemplu aici.

ACTUALIZARE!

În header.php după tag-ul body:

<?php st_above_header();?> 
<?php st_header();?> 
<?php st_below_header();?>
<?php st_navbar(); ?>
    <div id="wrap" class="container"> 

în footer.php chiar înainte de tag-ul body:

   </div> <!-- Sfârșit container -->

   <?php st_before_footer();?>
   <div class="inner-wrap"><?php wp_footer();?></div>
   <span class="border"></span>
   <?php st_after_footer();?>

   </div> <!-- Sfârșit container pagină -->

CSS:

#footer {
margin:0;
height:auto;
width:100%;
bottom:0;
/* fixat la partea de jos */
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;
/* necesar pentru poziționarea subsolului */
margin:0 auto;
/* centrare, nu în IE5 */
width:100%;
background:#f0f0f0;
height:auto !important;
/* browsere moderne */
height:100%;
/* IE6: tratat ca min-height */
min-height:100%;
/* browsere moderne */
}
.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;
}