How do I force my footer to the bottom of the page

Question

I have tried to create a footer for my site, I have found that the footer will only stay at the bottom when it is contained inside my content div, although I don't want the footer to conform to the content div width.

    </header>
    <div class="homepageIMG-Container">
        <img class="HomePageIMG" src="Images/HomePage IMG V4.png" alt="Night Time Tennis playing at Cooil Bar in Ramsey">         
    </div>
        <div class="indexImages">
            <img class="indexImage" src="Images/Index1.jpg" alt="Cooil bar gig picture">
            <img class="middleIndexImage" src="Images/Index2.jpg" alt="QuidsInn bar gig, featuring will boyd">
            <img class="indexImage" src="Images/Index3.jpg" alt="Cooil bar gig picture">
        </div>
            <footer class="footer">
                <ul  class="footerList">
                    <li><p></p></li>
                    <li><p></p></li>
                    <li class="icons">
                        <a href="#" class="fa fa-instagram"></a>
                        <a href="#" class="fa fa-facebook"></a>
                        <a href="#" class="fa fa-spotify"></a>
                        <a href="#" class="fa fa-twitter"></a>
                    </li>    
                                        
                </ul>
            </footer>
</body>

.footer{
width: 120%;
height: 100px;
background-color: black;
margin-top: 10%;
margin-bottom: 5%;

}

.AboutContent{
flex: 1 0 auto;
position: absolute;
margin-top: 60%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: min-content;

}