Header ve Footer Yüksekliği Hakkında Yardım

Merhaba,
Aşağıdaki kodu wordpres siteme eklediğimde header ve footer yüksekliği bozuluyor.
CSS de genişlik değiştirebiliyorum ama header ve footer yüksekliği ile ilgili cod bulamadım yardımcı olabilirseniz sevinirim.

https://codepen.io/cinzia/pen/YzOLEjr

<header>
  <h1>We have web accessibility in mind</h1>
  <p>Our mission is to empower organizations to make their web content accessible to people with disabilities.</p>
</header>
<div class="container">
  <div class="box">
    <figure>
      <img src="https://github.com/cinziaa/web-images/blob/main/presentation1.png?raw=true" alt="training icon" />
    </figure>
    <div>
      <h2>Accessibility Training</h2>
      <p>Whether here in Utah or on-site at your organization, WebAIM can provide web and document training to fit your needs.</p>
    </div>
  </div>
  <div class="box">
    <figure>
      <img src="https://github.com/cinziaa/web-images/blob/main/customer-service-agent.png?raw=true" alt="tecnical assistance icon" />
    </figure>
    <div>
      <h2>Technical Assistance</h2>
      <p>Need assistance implementing accessibility? WebAIM's expert staff can provide the assistance need.</p>
    </div>
  </div>
  <div class="box">
    <figure>
      <img src="https://github.com/cinziaa/web-images/blob/main/strategy.png?raw=true" alt="strategic icon" />
    </figure>
    <div>
      <h2>StrategicA11y</h2>
      <p>The Strategic Web Accessibility Workshop will help participants make strategic plans for the accessibility of thier organizations.</p>
    </div>
  </div>
  <div class="box">
    <figure>
      <img src="https://github.com/cinziaa/web-images/blob/main/presentation.png?raw=true" alt="report icon" />
    </figure>
    <div>
      <h2>Evaluation and Reporting</h2>
      <p>We can provide reports to help you know how accessible your site is and how to make it better.</p>
    </div>
  </div>
</div>
<footer>
  <ul>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Newsletter</a></li>
    <li><a href="#">Discussion List</a></li>
    <li><a href="#">Twitter</a></li>
  </ul>
</footer>

@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
:root {
  --gray: rgba(239, 241, 254, 1);
  --white: rgba(255, 255, 255, 1);
  --dark-gray: rgba(17, 21, 46, 1);
  --color-font: rgba(124, 124, 136, 1);
  --color-link: rgba(42, 111, 151, 1);
  --link-hover: rgba(137, 194, 217, 1);
}

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

body {
  font: 16px/24px Lato, sans-serif;
  color: var(--color-font);
  background-color: var(--gray);
}

header {
  width: 1000px;
  margin: 0 auto;
}

h1, h2 {
  font-family: Raleway, sans-serif;
  font-weight: 600;
  color: var(--dark-gray);
}

h1 {
  width: 50%;
  font-size: 2.5rem;
  line-height: 1.1;
  padding: 1rem 0;
}

h2 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

header p {
  margin: 0.7rem 0;
  width: 45%;
}

.container {
  max-width: 1000px;
  padding: 3rem 1rem;
  margin: 0 auto;
  padding: 16px 0;
  display: grid;
  grid-template-areas: "a b" "c d";
  gap: 0.9rem;
}

.box {
  padding: 1.6rem;
  background: var(--white);
  display: flex;
}

.box img {
  border-radius: 50%;
  margin-right: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 6px 6px 10px 0 rgba(0, 0, 0, 0.18), -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

.box:hover {
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.18);
}

footer {
  width: 1000px;
  margin: 0 auto;
  font-size: 0.85rem;
}

footer ul {
  width: 35%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
}

footer a {
  text-decoration: none;
  color: var(--color-link);
}

footer a:hover {
  color: var(--link-hover);
}

@media (max-width: 700px) {
  header h1,
header p {
    width: 40%;
    margin: 1rem;
  }

  .container {
    display: flex;
    flex-direction: column;
    margin: 1rem;
  }

  footer ul {
    margin: 1rem;
  }
}