Bootstrap navbar-fixed-bottom covers content

My bootstrap navbar-bottom covers content when I need to scroll the page. I've already tried to set the padding-bottom to 65px of the body but that didn't help.

My HTML

<!-- FOOTER -->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="container">
        <ul class="nav navbar-nav">
            <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></a></li>
            <li><a href="#"><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></a></li>
        </ul>
    </div> <!-- End container -->
</nav>

My CSS

body { 
    padding-bottom: 65px;
    padding-top: 65px; 
}

Could anyone help me out please :D Thanks in advance.