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