为什么我的文字偏向一边而不是中心

Question

嘿

我正在创建一个网站来开始我的博客，但我有一个错误。错误是我有一个“页脚”，其中包含我的姓名、版权信息，还有一个导航栏，其中包含指向主页、联系页面和关于页面的链接。

Picture of my Blog and the error image

根据设备，网页将页脚放在页面底部或博客文章旁边。现在，当页脚位于页面底部时，它没有居中，这是问题之一。另一个是页脚不像第一张图片那样居中。

The footer in the bottom but the text not centred image

我已经尝试过justify-content 等，但它不起作用。这是我的代码：

        <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;
}

我该怎么办？请帮帮我！

Answer 1

首先从这里删除“margin”和“padding”：

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

如果需要，您可以稍后添加。

如果您想将页脚放在最近的帖子下方，可以使用此样式。

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

如果您想将页脚放在页面底部，则使用此样式

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

还请下次发布您的所有代码。

Answer 2

我很确定你的填充给了你空白空间。