Come modificare header e footer a larghezza piena?

Ci sono molti modi per ottenere questo risultato.

Prima di tutto, attualmente tutto il tuo contenuto (inclusi header e footer) si trovano all'interno di un .container con una larghezza di 960px. Non puoi ottenere che questi div abbiano una larghezza del 100% quando sono all'interno di questo container. Quindi quello che devi fare è modificare il tuo codice spostando l'header e il footer al di fuori del container. Ho creato un esempio qui.

AGGIORNAMENTO!

In header.php dopo il tag body:

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

In footer.php appena prima del tag body:

   </div> <!-- Fine container -->

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

   </div> <!-- Fine page container -->

CSS:

#footer {
margin:0;
height:auto;
width:100%;
bottom:0;
/* attaccato al fondo */
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;
/* necessario per il posizionamento del footer */
margin:0 auto;
/* centrato, non in IE5 */
width:100%;
background:#f0f0f0;
height:auto !important;
/* browser moderni */
height:100%;
/* IE6: trattato come min-height */
min-height:100%;
/* browser moderni */
}
.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;
}