html - 从我的水平菜单中删除左右边距

Question

我正在使用 960 网格框架来制作 Web 元素的原型(prototype)。我的水平菜单的左右边距为 10px。我知道那是因为我将它放在 container_12 包装器中，但我想让它在整个页面宽度下拉伸(stretch)。这是目前的代码:

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