從我的水平菜單中刪除左右邊距

Question

我正在使用960網格框架進行web項目的原型設計。我的水平菜單有10px的左右邊距。我知道那是因爲我把它放在container_12包裝中，但我想要使其以全頁寬度進行拉伸。下面是代碼所以票價：

<div id="wraper" class="container_12"> 
    <header id="masthead"> 
     <div id="site-brand"> 
      <h1><a href="#">فنان ويب</a></h1> 
     </div><!-- =end site-brand--> 
     <div id="search-box"> 
      <form class="form-wrapper cf"> 
       <button type="submit">بحث</button> 
       <input type="text" placeholder="ابحث في الموقع" required title="أدخل كلمة البحث"> 
      </form> 
     </div><!-- =end search-box--> 
     <nav id="main-nav"> 
      <ul> 
       <li><a href="#">الرئسية</a></li> 
       <li><a href="#">دروس</a></li> 
       <li><a href="#">دورات</a></li> 
       <li><a href="#">عن الموقع</a></li> 
       <li><a href="#">من أنا؟</a></li> 
      </ul> 
     </nav> 
    </header> 

CSS：

#main-nav{ 
    background:#fff; 
    float:right; 
    width:100%; 
    border-radius: 1px; 
    } 

#main-nav ul{ 
list-style-type:none; 
margin:0; 
padding:0; 
} 

#main-nav li{ 
display:inline; 
float:right; 
padding:10px 22px 10px 30px; 
text-align: center; 
border-left: 1px #DADADA dotted; 
} 
#main-nav>ul>li:last-child { 
    border:none; 
} 

#main-nav a{ 
    color:#000000; 
    text-decoration: none; 
    display:block; 
    } 

#main-nav li:hover{ 
    color:#ffffff; 
    background:#de4062; 

} 

#main-nav a:hover{ 
    color:#ffffff; 
    display:block; 
} 

Answer 1

嘗試使用以下代碼

#main-nav{ 
margin-left: 0; 
margin-right: 0; 
} 

還設置其父的填充，以0等padding: 0;