html/css footer not positioning

So basically I made a footer and when I make it smaller, white space appears under it and the smallest size without the white space is 40px (what is way to big for my site). Anyone know what I've done wrong and I've also been trying to add a copyright under the nav,but it just gets placed on-top of it no matter what I change!

header:after,
section:after,
article:after,
footer:after,
#navigation-top:after,
#navigation-bottom:after,
#page-header-wrapper:after,
#banner-area-wrapper:after,
#page-body-wrapper:after,
#page-footer-wrapper:after,
.clearer:after {
  content: "";
  display: table;
  clear: both;
  width:960px;
  margin:0 auto;

}


footer nav {
  float:left;
}


footer nav ul li {
  display: inline-block;
  margin-left:10px;
  list-style: none;

}

footer nav ul li a {
  font-family: tpeb;
  font-size:12px;
  color: #fff;
  text-align: center;
}


footer {
  width:100%;
  background-color: #292929;
  padding:40px 0px;
}

<footer>
  <div class="wrapper">
      <p>
      <nav>
     <ul>
         <li><a href="index.html">HOME</a></li>
         <li><a href="anime.html">ANIME</a></li>
         <li><a href="manga.html">MANGA</a></li>
         <li><a href="forums.html">FORUMS</a></li>
         <li><a href="faq.html">FAQ</a></li>
         <li><a href="contact.html">CONTACT</a></li>
      </ul>
    </nav>
</div>

</footer>

Solution

I can't tell from the HTML/CSS you've posted if you're site is too short height-wise (this can result in leftover white-space under your footer).

When in doubt, if you really want your footer to be at the bottom of your page,

footer {
    position:absolute;
    bottom:0;
/* anything else style-wise*/
}

Your

footer nav {
  float:left;
}

seems to be what's causing your copyright message to be pushed up. You could change it to:

footer nav {
  left:0;
}

for a similar effect without the push up. Generally, avoid using 'float' in CSS if you find positioning issues.