我和我的小组都共享相同的CSS样式页面作为我们的页眉和页脚，只是在我们单独的HTML代码中复制了完全相同的代码。但无论出于何种原因，我的页眉和页脚与其他人的不同。我们都尝试过，但无法弄清楚为什么我的页面是唯一一个这样的页面。
这就是我的页眉和页脚HTML代码的样子：

<div class="header">
        <div id="header_left">
          <a href="index.html">
            <img src="./images/ASA_logo.jpg" alt="ASA LOGO" width="80px" id="asa_logo">
          </a>
          <p>African <br> Student <br> Association</p>
        </div>
        <div id="nav">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about_us.html">About Us</a></li>
            <li><a href="events.html">Events</a></li>
            <li><a href="e_board.html">E-Board</a></li>
            <li><a href="contact_us.html">Contact Us</a></li>
            <li id="more"><a href="#">More</a>
              <ul class="dropdown">
                <li><a href="meetings.html">Meetings</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="history.html">History</a></li>
                <li><a href="fun_fact.html">Fun Fact</a></li>
                <li><a href="other_orgs.html">Other Multicultural Orgs</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

<div class="footer">
        <div id="footer_left">
            <p>Call us: 715-836-3367</p>
            <p>Email: <a id="email" href="mailto:chanc95@uwec.edu" target="_nl">chanc95@uwec.edu</a></p>
        </div>
    
        <div id="footer_right">
          <p>Follow us on:</p>
    
          <div id="footer_contact">
            <a href="https://www.facebook.com/ASAEauClaire?mibextid=LQQJ4d " target="_blank">
              <img src="./images/facebook_icon.png" alt="Facebook Icon" width="30px" height="30px" id="facebook_logo">
            </a>
    
            <a href="https://instagram.com/uwec_asa?igshid=YmMyMTA2M2Y=" target="_blank" >
              <img src="./images/instagram_icon.png" alt="Instagram Icon" width="30px" height="30px" id="instagram_logo">
            </a>
          </div>
        </div>
    </div>

这是header和footer的CSS：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .header, .footer {
    background: #8d5b4c;
  }
  
  .header {
    grid-area: header;
    display: flex;
    z-index: 1;
    width: 100vw;
  }

  .header p, .footer p{
    font-size: 15px;
    color: white;
  }
  
  #header_left {
    display: flex;
    flex: 1;
  }
  
  #header_left p, #header_left img {
    padding: 10px;
  }
  
  #header_left p {
    padding-top: 17px;
  }
  
  #asa_logo {
    border-radius: 50%;
  }
  
  #asa_logo:hover {
    padding: 5px;
  }
  
  #nav > ul {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    padding-right: 5px;
  }
  
  #nav > ul > li {
    list-style-type: none;
    padding: 10px;
  }
  
  #nav > ul > li > a {
    text-decoration: none;
    color: #FFFFFF;
    font-size:15px;
  }
  
  #nav > ul > li > a:hover {
    text-decoration: underline;
    color: black;
  }
  
  .dropdown {
    visibility: collapse;
  }
  #more:hover > .dropdown {
    visibility: visible;
  
  }
  
  .dropdown {
    background-color: antiquewhite;
    width: 70%;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 2px 2px lightgray;
    border-radius: 5%;
    border-color: black 1px;
  }
  
  .dropdown li {
    list-style-type: none;
    padding: 5px;
  }
  
  .dropdown li a {
    color: black;
    text-decoration: none;
    font-size: 15px;
  }
  
  .dropdown li a:hover {
    text-decoration: underline;
    font-weight: bold;
  }

  .footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    width: 100vw;
  }
  
  #footer_left{
    width: 100%;
    padding: 10px;
  }
  
  #email {
    color: white;
    text-decoration: none;
  }
  
  #email:hover {
    text-decoration: underline;
    color: black;
    cursor: pointer;
  }
  
  #footer_right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 10px;
  }
  
  #footer_right p {
    font-size: 15px;
    padding-bottom: 5px;
  }
  
  #footer_contact a {
    padding: 5px;
  }
  
  #facebook_logo:hover, #instagram_logo:hover{
    padding: 1px;
  }

这就是我的header和footer的样子：

它应该是这样的：

这显然是非常小的问题。我已经尝试过使用填充和边距，但似乎没有任何效果。然后更改样式中的东西会影响我的组成员页眉和页脚，而那里是完全正常的。有人知道为什么这只发生在我的身上吗？