Problems with "top: 0px" on absolute position

I have been trying to place some tags on the top: 0px of some divs.

My problem is, that when I put "top: 0px", it does not place my to the top of the parent div.

I have been searching for some info about this, and it seems to be a "Collapsing Margin" problem..

I have tried to fix it by myself, but I can't fix it without keeping the main structure (main class centered.. header with width 100%.. etc..)

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

In this example, the Box1, Box2, etc.. Should be in the same height of the top line of every box.

Thanks

Solution

Because H3 having default top and bottom margin. I just added margin: 0 in H3 css and update your code. I hope it'll help you out. Thanks

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>