My footer will not stay under my main content

Question

I'm still very much a beginner but I've googled and either can't find the answer or maybe I'm just not understanding what I do find.

But I'm trying to place a footer at the bottom of my page and have it sit directly under my main content. I can get it to go to the bottom but it overlaps or goes behind the main content.

Here's a link to the codepen: https://codepen.io/k-miller/pen/RwGGxEB

Like I said, I'm pretty new at this so I hope I'm making sense. Thanks!

Footer in HTML:

  <!-- footer -->
    <footer class="footer">
        <div class="main-part">
            <div class="footer-list-wrapper">
                <h3 class="footer-heading">
                    Hello World
                </h3>
                <ul class="footer-list">
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            hello@bellnet.ca
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            123 Somewhere Ave.
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <div class="footer-list-link">
                            123-555-5555 ex 1234
                        </div>
                    </li>
                </ul>
            </div>
            <div class="footer-list-wrapper">
                <h3 class="footer-heading">
                    Explore
                </h3>
                <ul class="footer-list">
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            Home
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            News
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            Archive
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            Contact Us
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            Advertise
                        </a>
                    </li>
                    <li class="footer-list-item">
                        <a href="#" class="footer-list-link">
                            News Briefs
                        </a>
                    </li>
                </ul>
            </div>
    
            <div class="logo-wrapper">
                <div class="logo">
                    <img src="images/static/psp-logo.png" class="psp-logo" alt="PSP Logo">
                </div>
               
            </div>
        </div>
    
    
        <div class="creator-part">
            <div class="copyright-text">
                <p>Copyright &copy; 2016 Lorem, ipsum.. All rights reserved.</p>
            </div>
        </div>
    
    </footer>
    <!-- end of footer -->

CSS for footer:

/* footer */
.footer{
    position: absolute;
    align-self: left;
    /* display: block;
    margin-left: -20px; */
    bottom: 0;
    top: 100%;
    width: 100%;
    height: auto;
    z-index: -10;
} 


.main-part{
    display: flex;
    /* flex-direction: column; */
    justify-content: left;
    background-color: #1c1c1c;
    padding: 40px;
}

.footer-heading{
    font-size: 25px;
    font-weight: 300;
    color: rgb(227, 27, 35);
    margin: 10px 0 30px 0;
}

.footer-list-wrapper{
    padding: 35px;
}

.logo-wrapper{
    padding: 50px;
}

.psp-logo{
    width: 200px;
}

.footer-list{
    list-style: none;
    padding: 0;
}

.footer-list-item{
    margin-bottom: 20px;
}

.footer-list-link{
    font-size: 14px;
    text-decoration: none;
    color: #bbb;
}

.contact p{
    font-size: 15px;
    color: #bbb;
    margin-bottom: 40px;
}

.creator-part{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111;
    padding: 0 40px;
}

.copyright-text{
    font-size: 13px;
    color: #aaa;
}
/* end of footer */

Answer 1

you have to use tag <position : fixed;>

Answer 2

To place footer at bottom, you have to set footer position to fixed. I have removed all unwanted css from footer.

.footer{
    position: fixed;
    width: 100%;
    bottom: 0
}

Here is link of the the working example of the same link