有很多方法可以实现这一点。

首先，现在您的所有内容（包括页眉和页脚）都在.container 宽度为960px。当这些div位于该容器内时，您无法使其100%宽度。因此，您需要的是通过将页眉和页脚移出容器来更改代码。我已经创建了一个示例here.

使现代化

在标题中。正文标记后的php：

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

   </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 -->

#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;
}