Why my text is cornered to a side instead of center

Question

Hey

I am making a website to start my blog but I have a error. The error is I have a "footer" which has my name, copyright things, and also a navbar with links to the home page, contact page, and about page.

Picture of my Blog and the error image

Based on the device the webpage either puts the footer at the bottom of the page or next to the blog articles. Now when the footer is on the bottom of the page it is not centred, which is one of the problem. Another one is when the footer is not centered like the the first image.

The footer in the bottom but the text not centred image

I've tried justify-content and etc. but it doensn't work. Here is my code:

        <aside>
            <h3>About</h3>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem eum molestiae laboriosam, nemo deserunt fugiat sint nobis, nesciunt enim porro voluptatem, atque quaerat earum neque.
            </p>
            <hr>
            <h3>Recent Posts</h3>
            <ul>
                <li><a href="#day-5" class="blog-post">Day 5</a></li>
                <li><a href="#day-4" class="blog-post">Day 4</a></li>
                <li><a href="#day-3" class="blog-post">Day 3</a></li>
                <li><a href="#day-2" class="blog-post">Day 2</a></li>
                <li><a href="#day-1" class="blog-post">Day 1</a></li>
            </ul>
        </aside>
        <div class="footer">
            <footer>
                <section>
                    <a href="index.html">HOME</a>
                    <a href="about.html">ABOUT ME</a>
                    <a href="contact.html">CONTACT ME</a>
                </section>
                <p>Copyright &copy; 2021 Jacqueez</p>
            </footer>
        </div>

main{
    float: left;
    width: 70%;
    background-color: turquoise;
}

main p{
    font-size: 1.1rem;
    line-height: 1.6rem;
    padding: 20px;
}

aside{
    float: right;
    width: 25%;
}

aside ul li{
    font-size: 1.1rem;
    line-height: 1.6rem;
    list-style: none;
}

footer{
    margin: 5rem;
    padding: 5rem;
    color: lightseagreen;
    
}

aside p{
    font-size: 1.1rem;
    line-height: 1.6rem;
    padding: 5px;
}

What do I do? Please help me!

Answer 1

First of all remove "margin" and "padding" from here:

footer{
    margin: 5rem;
    padding: 5rem;
    color: lightseagreen; 
}

You can add them later if you want.

You can use this style if you want to place your footer under the recent posts.

.footer {
    clear: right;
    float: right;
    width: 25%;
}

and this style if you want to place your footer at the bottom of the page

 .footer {
    clear: both;
    text-align: center;
  }

Also please post all your code next time.