CSS Grid在Firefox上看起来不错，但在Chrome或Safari上却不行

Question

在Firefox中，我的布局看起来像我期望的那样，但在Safari或Chrome中却没有。

白色标题元素应位于照片上方，而不是重叠。

CodePen示例：https://codepen.io/ivanoats/pen/byvXdq

HTML：

<header role="banner">
<div class="logo">
  <div class="logotype">Good&nbsp;❖&nbsp;Paddle</div>
</div>
<nav class="main-nav">
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle" class="label-toggle"></label>
  <nav class="nav-wrapper">
    <ul role="navigation">
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Blog</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</nav>
</header>
<div class="container">
 <section class="hero">
   <h1>What makes a good paddle?</h1>
   <h2>
     <a href="#">Let me know</a>
   </h2>
   <img src="https://goodpaddle.com/images/semiahmoo.jpg" alt="pic of good stroke">
   <p>Blade fin unlimited waves leash catch fin valve. Laird PFD aloha whitewater SUP dana point sesh kook foil, PFD board
    bag downwind dana point PFD..</p>
  </section>
</div>

CSS：

*,
*::before,
*::after {
    box-sizing: inherit;
 }

html {
  font-kerning: normal;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
}

ol,
ul {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, Helvetica, Arial,
  sans-serif;
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 20%);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 90%;
  margin-left: 5vw;
  margin-right: 5vw;
}

.main-nav {
  margin-top: 0.5em;
}

.nav-wrapper {
  margin: 0 auto;
  max-width: 960px;
  padding: 0;
}


.main-nav ul li {
  margin-left: 0.5em;
  margin-right: 0.5em;
  display: inline-block;
}

.main-nav ul li a {
  color: #000;
  padding: 1em;
  text-decoration: none;
  transition: all 0.5s ease;
}

.logo {      宽度：15％;   }

}

.hero {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  display: grid;
  grid-column: 1 / 6;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero img {
  max-width: 100%;
  min-width: 100%;
  z-index: -1;
  grid-column: 1 / -1;
  grid-row: 1 / 4;
  object-fit: fill;
  opacity: 0.85;
}

.hero p {
  grid-column: 1 / -1;
  grid-row: 4 / 5;
  align-self: center;
  width: 66%;
  justify-self: center;
  font-size: calc(0.75rem + 1vw);
  line-height: 1.5;
  margin: 0;
}


.content {
  grid-column: 2 / 5;
  grid-row-start: 3;
  min-height: 200px;
  line-height: 1.5em;
  font-size: 1.3em;
}

我在做什么错，或者应该如何为当前可用的Chrome和Safari版本修复它？