CSS Grid - One block is not the same as the others

Question

I am working on a portfolio page and I thought I would add in some certificates. I have made a grid, and used {grid-row-gap: 50px;} which has worked on the other blocks within the grid. But one of them is not falling into place.

The top margin of the last block (.cert5) is larger then the others.

I will put the code here below so you can see what I have done so far: (SideNote - I am new to coding so I might not be written quite elegantly.)

Here is the CSS and HTML:

.certcontainer {
  background-color: hsl(120, 30%, 40%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 50px;

  justify-items: center;
  width: auto;
  height: auto;
  margin-top: 0;
  margin-left: -10px;
  margin-right: -8px;
}
.cert1 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
  margin-top: 80px;
}
.cert2 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
  margin-top: 80px;
}
.cert3 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
}
.cert4 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
}
.cert5 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
}

<div class="certcontainer">
  <div class="cert1"><img src="https://www.sololearn.com/Certificate/1014-9937677/jpg" style="width:400px;height:250px;"></img></div>
  <div class="cert2"><img src="https://www.sololearn.com/Certificate/1023-9937677/jpg" style="width:400px;height:250px;"></img></div>
<div class="cert3"><img src="https://screenshotscdn.firefoxusercontent.com/images/463d568d-c08c-4988-be12-3858533a829a.png" style="width:400px;height:250px;"></img></div>
  <div class="cert4"><img src="https://screenshotscdn.firefoxusercontent.com/images/55899e8e-948b-4a31-9df8-5c04946b16f4.png" style="width:400px;height:250px;"></img></div>
  <div class="cert5"><img src="https://screenshotscdn.firefoxusercontent.com/images/fe337c4f-c92f-41e2-bd8d-262cc70c6150.png" style="width:400px;height:250px;"></img></div>
</div>

Answer 1

Remove margin-top from cert1 and cert2 and add a padding-top to the certcontainer to serve the purpose - see demo below:

.certcontainer {
  background-color: hsl(120, 30%, 40%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 50px;

  justify-items: center;
  width: auto;
  height: auto;
  margin-top: 0;
  margin-left: -10px;
  margin-right: -8px;
  padding-top: 80px; /* ADDED */
}
.cert1 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
  /*margin-top: 80px;*/
}
.cert2 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
  /*margin-top: 80px;*/
}
.cert3 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
}
.cert4 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
}
.cert5 {
  border: 30px solid transparent;
  border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
  width: 400px;
  height: 247px;
}

<div class="certcontainer">
  <div class="cert1"><img src="https://www.sololearn.com/Certificate/1014-9937677/jpg" style="width:400px;height:250px;"></img></div>
  <div class="cert2"><img src="https://www.sololearn.com/Certificate/1023-9937677/jpg" style="width:400px;height:250px;"></img></div>
<div class="cert3"><img src="https://screenshotscdn.firefoxusercontent.com/images/463d568d-c08c-4988-be12-3858533a829a.png" style="width:400px;height:250px;"></img></div>
  <div class="cert4"><img src="https://screenshotscdn.firefoxusercontent.com/images/55899e8e-948b-4a31-9df8-5c04946b16f4.png" style="width:400px;height:250px;"></img></div>
  <div class="cert5"><img src="https://screenshotscdn.firefoxusercontent.com/images/fe337c4f-c92f-41e2-bd8d-262cc70c6150.png" style="width:400px;height:250px;"></img></div>
</div>