jquery로 베너 작업중인데 이미지 슬라이드라 간단해요

아이폰홈페이지(  www.apple.com/kr/iphone )처럼 좌우여백없이 100%로 할려고하는데;;;css를 잘몰라 width로 수정을 100%를 해도 계속 깨지고 있어요.ㅠㅠ

고수님들 부탁드리겠습니다.

<style type="text/css">
*{margin:0; padding:0;}
img{border:0 none;}
.slider_wrap{position:relative;margin:0 auto;width:780px;}
.slider_wrap .prev,.slider_wrap .next{display:none;position:absolute;top:50%;margin-top:-32px;padding:5px;background-color:#fff;z-index:10;}
.slider_wrap .prev{left:0px;border-top-right-radius:6px;border-bottom-right-radius:6px;}
.slider_wrap .next{right:0px;border-top-left-radius:6px;border-bottom-left-radius:6px;}

.slider_show{overflow:hidden;width:780px;position:relative;}
.slider_box{height:100%;margin-left:0;}

.slider_list{overflow:hidden;float:left;position:relative;width:780px;height:600px;}

.slider_nav{position:absolute;width:100%;bottom:30px;text-align:center;z-index:100;font-size:0;}
.slider_nav a{display:inline-block;width:12px;height:12px;margin:0 5px;border-radius:10px;background-color:#B5B5B5;}
.slider_nav a.on{background-color:#4295E8}

.btns{position:absolute;right:10px;bottom:10px;z-index:100}
.btns a{padding:3px 5px;text-decoration:none;background-color:#4295E8;color:#fff;font-size:16px;font-family: "Dotum","돋움","Arial","sans-serif";text-transform:uppercase;}
</style>
<script type="text/javascript">
$(function(){
 /*  기본세팅  */
 var $list = $(".slider_list");
 var $box = $(".slider_box");
 var wd = $list.width();
 var num = $list.size();
 var margin,current,play;
 $box.width(wd*num);

 for(i=0; i<num; i++){
  var nav = '<a href="#" title="'+(i+1)+'번째로 이동"></a>'
  $(".slider_nav").append(nav);
 };
 var $nav = $(".slider_nav a");

 $(".slider_nav a:first").addClass("on");
 
 setTimeout(function(){
  play = setInterval(play_next,2000);
 },3000)

 $(".slider_wrap").hover(function(){
  $(".prev,.next").show();
 },function(){
  $(".prev,.next").hide();
 });
 
 /*  반복할 이벤트  */
 function play_next(){
  margin = parseInt($box.css("margin-left"));
  if(margin < -(wd*(num-2))){
   $box.not(":animated").animate({"marginLeft":"0px"},"fast");
  }else{
   $box.not(":animated").animate({"marginLeft":"-="+wd+"px"},"fast");
  };
  //var current = Math.abs(margin/wd);
  var current = Math.abs(Math.floor(margin/wd));
  $nav.removeClass("on");
  $nav.eq((current-num)+1).addClass("on");
 }

 function play_prev(){
  clearInterval(play);
  margin = parseInt($box.css("margin-left"));
  if(margin == 0){
   $box.not(":animated").animate({"marginLeft":"-"+wd*(num-1)+"px"},"fast");
  }else{
   $box.not(":animated").animate({"marginLeft":"+="+wd+"px"},"fast");
  };
  var current = Math.abs(Math.floor(margin/wd));
  $nav.removeClass("on");
  $nav.eq(current-1).addClass("on");
 }

 /*  버튼  */
 $(".next").click(function(){
  clearInterval(play);
  play_next();
  return false;
 });

 $(document).keydown(function(evt){
  if (evt.keyCode==37){
   play_prev();
  }else if(evt.keyCode==39){
   clearInterval(play);
   play_next();
  }
 });

 $(".prev").click(function(){
  play_prev();
  return false;
 });

 $nav.click(function(){
  clearInterval(play);
  $nav.removeClass("on");
  $(this).addClass("on");
  $box.not(":animated").animate({
   "marginLeft":-wd*($(this).index())
  });
  return false;
 });

 $(".play").click(function(){
  clearInterval(play);
  play = setInterval(play_next,2000);
  return false;
 });

 $(".stop").click(function(){
  clearInterval(play);
  return false;
 });
 
 /*
 $(".slider_wrap").mouseenter(function(){
  clearInterval(play); 
 }).mouseleave(function(){
  play = setInterval(play_next,3000);
 });
 */

 
});
</script>

<div class="slider_wrap">
 <a href="#" class="prev" title="이전"><img src="<?php echo G5_IMG_URL ?>/main_left.png"  alt="prev" /></a>
 <a href="#" class="next" title="다음"><img src="<?php echo G5_IMG_URL ?>/main_right.png" alt="next" /></a>
 <div class="slider_show">
  <!-- slider_box -->
  <div class="slider_box">
   <div class="slider_list">
    <div class="custom_pic">
     <img src="img/banner1.gif" alt="img01" />
    </div>

   </div>
   <div class="slider_list">
    <div class="custom_pic">
     <img src="http://zinoui.com/app/web/img/landing/html5-canvas-library.png"  alt="img02" />
    </div>

   </div>
   <div class="slider_list">
    <div class="custom_pic">
     <img src="http://zinoui.com/app/web/img/landing/html5-svg-library.png" alt="img03" />
    </div>

   </div>
   <div class="slider_list">
    <div class="custom_pic">
     <img src="http://zinoui.com/app/web/img/landing/php-server-helpers.png" alt="img04" />
    </div>
   </div>
  </div>
  <!-- //slider_box -->
  <!-- slider_nav -->
  <div class="slider_nav"></div>
  <!-- //slider_nav -->
  <div class="btns">
   <a href="#" class="play">play</a>
   <a href="#" class="stop">stop</a>
  </div>
 </div>
</div> ​