绝对位置“顶部：0px”的问题

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 50%;
  background-color: grey;
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  z-index: 1000;
}

.topzone {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 950px;
}

.inside-main {
  background-color: white;
  width: 100%;
  height: 375px;
}

.inside-title {
  justify-content: center;
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.inside-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.inside-content div {
  position: relative;
  width: 30%;
  margin: 0px 10px 0px 10px;
}

.inside-content img {
  width: 100%;
}

.inside-content div h3 {
  position: absolute;
  top: 0px;
  margin: 0;
  width: 100%;
}

<header>
  <div>
    <button id="login">1</button>
    <button id="signin">2</button>
  </div>
</header>

<div class="topzone">
  <h1>TOP ZONE TITLE</h1>
</div>

<div class="main">
  <div class="inside-main">
    <div class="inside-title">
      <h1>INSIDE TITLE ZONE</h1>
    </div>
    <div class="inside-content">
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 1</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 2</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 3</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 4</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 5</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 6</h3>
      </div>
    </div>
  </div>