How to change header & footer to full width? [closed]

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