有人能帮忙吗？ 我正在努力完成我的大学项目。

为什么我的文章在我的页脚后面，而不是在媒体查询部分下推？ 我试过另一种不同的方法，但似乎都不起作用。 我觉得我错过了一些很简单的东西。

我只允许建立在HTML和CSS的网站。

HTML:

   <article>
       <h2>places to visit</h2>
          <ul>
             <li class = "exlink">
             <a href="https://www.butlins.com" rel="nofollow">Butlins</a></li>
             <li class = "exlink">
             <a href="https://www.blackpoolpleasurebeach.com" rel="nofollow">Blackpool</a></li>
             <li class = "exlink">
             <a href="https://www.altontowers.com" rel="nofollow">Alton Towers</a></li>
             <li class = "exlink">
             <a href="https://www.flamingoland.co.uk" rel="nofollow">Flamingo Land</a></li>
          </ul>
    </article>
      
    <footer>
      <p>StaycationVacation&copy;</p>
      <ul class = "footlist">
         <li><a href = "index.html">Home</a></li>
         <li><a href = "AboutUs.html">About us</a></li>
         <li><a href = "ContactUs.html">Contact us</a></li>
      </ul>
      <div>
         <img src = "images/Facebook.png" alt = "Facebook">
         <img src = "images/Instagram.png" alt = "Instagram">
         <img src = "images/Twitter.png" alt = "Twitter">
      </div>
   </footer>

CCS:

   article{
              display: inline-block;
              position: relative;
              left: 5%;
              padding: 0.5%;
              background-color: rgb(0, 0, 0, 0.5);
              width: 92%;
              height: 10%;
              color: white;
          }
          .exlink{
             display: block;
             position: relative;
             right: 130%;
             line-height: 2.0;
          } 
          footer{
              clear: both;
              position: relative;
              top: 10%;
              width: 100%;
              height: 25%;
              background-color: rgb(0, 0, 0, 0.5);
           }
           .footlist > li{
              display: block;
              position: relative;
              left: 10%;
              border-left: 2px white solid;
           }
           div > img{
              display: block;
              height: 10%;
              width: 10%;
              position: relative;
              left: 67%;
         }
       }