Html 全宽导航

我希望这可能是一个快速修复。我已经盯着这个看了很久了，我希望有一双新的眼睛能够马上看到哪里出了问题

问题:

底部的导航必须是页面的全宽。我希望它能扩展页面的宽度，边缘不留空白

请注意，我刚刚开始为768PX及以下版本编写此代码。

导航：

<footer class="row small-12 columns clearfix">
    <nav id="footnav">
        <ul>
            <li>
                <a href="#" title="About">About</a>
            </li>


            <li>
                <a href="#" title="Work">Work</a>
            </li>


            <li>
                <a href="#" title="Contact">Contact</a>
            </li>
        </ul>
    </nav>


    <p>&copy; 2014 hsudfapsdif</p>
</footer>

nav #footnav {
    margin: 0;
}
nav ul li {
    position:relative;
    margin-left:3.333333333333%
}

nav ul li a {
    display:block;
    text-transform:lowercase;
    padding:2em 3.333333333333%;
    padding:1.2em 6.25%;
    font-size:16px;
    background:#121314 url(../img/arrow.png) no-repeat 93.5% 50%;
    border-bottom:1px solid #222
}

nav a:link,nav a:visited {
    color:#666;
    font-weight:700;
    text-decoration:none;
    -webkit-transition:all .25s linear;
    transition:color .25s linear
}

nav a:hover,nav a:active {
    color:#ccc
}

nav ul li.current a:link,nav ul li.current a:visited,nav ul li.current a:hover,nav ul li.current a:active {
    color:#fff;
    background-color:#111
}

&抄袭；2014年hsudfapsdif

导航#英尺导航{
保证金：0；
}
李国荣{
位置：相对位置；
剩余利润：3.333%
}
海军ulli a{
显示：块；
文本转换：小写；
填充物：2米3.333%；
填充物：1.2米6.25%；
字体大小：16px；
背景：#121314 url（../img/arrow.png）不重复93.5%50%；
边框底部：1px实心#222
}
导航a:链接，导航a:已访问{
颜色：#666；
字号：700；
文字装饰：无；
-webkit过渡：全部.25s线性；
过渡：颜色。25s线性
}
导航a:悬停，导航a:激活{
颜色：#ccc
}
导航ul li.current a:链接，导航ul li.current a:访问，导航ul li.current a:悬停，导航ul li.current a:激活{
颜色：#fff；
背景色：#111
}

您可以尝试此代码

<div class="row small-2 columns large-2 columns clearfix btnWrap">
    <span class="btn">Read More</span> 
</div>

    body {
       margin: 0;
    }

    .btnWrap{
        text-align: right;
    }

    .btn{
       padding:10px 20px;
    }

    nav ul{
       margin: 0;
       padding: 0;
    }

    nav ul li{
       margin-left:0; // Remove the left margin
    }

阅读更多
身体{
保证金：0；
}
.btnWrap{
文本对齐：右对齐；
}
.btn{
填充：10px 20px；
}
导航ul{
保证金：0；
填充：0；
}
李国荣{
左边距：0；//删除左边距
}

有很多方法可以解决按钮问题。查看这两个选项

选项1：换行一个新div

<div class="align-right">
  <div class="row small-2 columns large-2 columns btn clearfix">Read More</div>
</div>

.align-right {
  text-align: right;
  padding-right: 30px;
}

---

至于导航，只增加

width:100%怎么样到
#footnav
？也许我不确定你到底在问什么…
你试过删除或编辑它的CSS属性吗？尝试删除并替换为行…
您只需向现有标记中添加两条规则即可

body {
    margin: 0;
}

nav ul {
    padding-left: 0;
}

列表项上还设置了一个左边距。去掉那个

不幸的是，导航的周围仍然有空白。按钮没有动。谢谢你的建议。可能是我不理解你的问题，你可以查看更新的演示链接。很好，按钮工作正常，谢谢。关于导航，我只希望每个
都能覆盖页面的整个宽度。就像顶部的头球一样。这有意义吗？谢谢你很难在看不到真实情况的情况下提供帮助。。。尝试添加
右边距：0；左边距：0和/或
右填充：0；左侧填充：0和/或
宽度：100%
至
nav ul li
。
body {
    margin: 0;
}

nav ul {
    padding-left: 0;
}