某些div的页脚部分出现问题

我对所有这些定位材料都感到头疼，所以我决定向您询问。我已经读过关于这种事情定位的博客，但是作为一个初学者，要找到确切的答案有点困难。

我有以下问题：

在图像中，您将看到我所拥有的（我无法发布，所以这里是SS的链接：http : //gyazo.com/bbea3f21abf77515288719296e496fcc），我想移动：“版权blablabla”在底部使用页脚的所有宽度的页脚，我已经尝试了所有方法，例如：

footer #copyright{
    font-size: 75%;
    top: 20em; /* just trying*/
    position: relative;
    text-align: center;
    width: 100%;

但是div仍然会触及其他要素（条款和条件，隐私权，并且保持与您在图片中所看到的完全一样）。“条款和条件等”的代码如下：

footer li a{
    font-size: 90%;
    text-decoration:none; /* Quita toda decoracion del texto*/
    position: relative;
      /* este comando convierte en boton el reectangulo*/
    vertical-align: text-top;
        float: right;
         width: 30%;

谁能帮我？

PD：我添加了我的html代码：

    <footer>


        <li><a href="#contactus">Contact us</a></li>
        <li><a href="#privacy">Privacy policy</a></li>
        <li><a href="#terms">Terms and conditions</a></li>
        <li><a href="#aboutus">About us</a></li>

        <a id="copyright">Copyright 2015 Pepito S.L., All Right Reserved.</a>

    </footer>
</body>

关于我的CSS，是这样的：

* {
    margin: 0;
    padding: 0;
    font-family: verdana;
}

footer {
    width: 100%;
    height: 12em;
    background-color: #363636;
}

footer li {
    list-style: none;
    text-transform: uppercase;
}

footer li a{
    font-size: 90%;
    text-decoration:none; /* Quita toda decoracion del texto*/
    position: relative;
      /* este comando convierte en boton el reectangulo*/
    vertical-align: text-top;
        float: right;
         width: 30%;


         /* Borde para ver el div*/
    color: #696969;
      border: 1px solid #f00;

}

footer a #copyright{
    font-size: 5%;
    position: absolute;
    text-align: center;
    bottom: 0;

/* Borde para ver el div*/
    color: #696969;
      border: 1px solid #f00;

 }