¿Cómo cambiar el encabezado y pie de página a ancho completo?

Existen múltiples formas de lograr esto.

En primer lugar, actualmente todo tu contenido (incluyendo el encabezado y pie de página) está dentro de un .container con un ancho de 960px. No puedes hacer que estos div's tengan un 100% de ancho cuando están dentro de este contenedor. Por lo tanto, lo que necesitas es modificar tu código moviendo el encabezado y pie de página fuera del contenedor. He creado un ejemplo aquí.

¡ACTUALIZACIÓN!

En header.php después de la etiqueta body:

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

En footer.php justo antes de la etiqueta body:

   </div> <!-- Fin del contenedor -->

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

   </div> <!-- Fin del contenedor de página -->

CSS:

#footer {
margin:0;
height:auto;
width:100%;
bottom:0;
/* pegado 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;
/* necesario para posicionar el footer */
margin:0 auto;
/* centrado, no funciona en IE5 */
width:100%;
background:#f0f0f0;
height:auto !important;
/* navegadores modernos */
height:100%;
/* IE6: tratado como altura mínima */
min-height:100%;
/* navegadores modernos */
}
.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;
}