之前 footer 显示在左下角很小一个是因为我是智缺把 footer 也写在了 main 里面，现在 section 又缩成一团了......

HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./CSS/article.css"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <main>
    <article>
    <section>
      <p>这是一个记录性的网站，是静态的。并不能互动。</p>
    </section>
    </article>
    </main>
    <text->
      <a href="https://14-star.neocities.org/about"> 
      <img src="https://14-star.neocities.org/myteam.png" alt="about">
      </a>
    <title>Iam_God公开赛公告记录</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <h1>这里是 Iam_God 的所有邀请赛的公告哦！</h1>
    
<!--    <p>This is a paragraph! Here's how you make a link: <a href="https://neocities.org">Neocities</a>.</p> -->
    <a href="https://14-star.neocities.org/contest/2023April"><h2>2024.4月</h2></a>
    </text->
        <footer>
        <p>你好！欢迎来到 Iam_God 的邀请赛记录！</p>
    </footer>
  </body>
</html>

CSS 代码：

footer {
  height: 100px; 
  width: 99%;
  background-color: #16f6f2;
  position: fixed;
  bottom: 0;
  border: 2px black solid;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
main article{
  padding: 10px;
  height: 100%;
  border: 1px black solid;
  float: right;
  right:0;
  width: 40%;
  
}
main section{
  padding: 10px;
  margin-right: 5%;
  right:0;
  width: 20%;
  height: 80%;
  border: 1px black solid;
  float: right;
}

站点：https://14-star.neocities.org/

预想：

xxx   _____
xxx   |   |
xxx   |____|
 ______
|______|

实际：

xxx   _____
xxx   |____|
xxx   
 ______
|______|

缩成了一团，预设高度 100% 实际可能只有 40%......

求调