Margin Top: Chrome & Safari

Question

I've been trying to find the possible reason why the margin-top seems not working using safari. But when I tried to check using Chrome it's working fine.

Chrome

In the picture, you can see here the cursor hovers the item and changes the image. This one works fine

But when I tried to test using

Safari this one occured

As requested using *{border: 1px solid red;}

The item goes up whenever I tried to hover the items.

instructors.php

   <div id="gallery-container1">
   <div class="row-content1">
              <?php
    try{
    $connect = new PDO("mysql:host=$host;dbname=$database", $username, $password);
    $connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $query = "SELECT * FROM ch_users ORDER BY arrangement_id ASC";
            $data = $connect->query($query);
            foreach($data as $instructor_row){
            ?>
              <div class="img-container1">
              <div class="img-content1">
                <a data-toggle="modal" href="#edit" class="edit" >
                  <img src="img/instructor/<?php echo $instructor_row['thumbnail'];?>" class="thumbnail-image">
                  <img src="img/instructor/<?php echo $instructor_row['hover'];?>" class="hover-image fade-in">
                </a>
              </div>
            </div>
        <?php
                    }//end of foreach
                }//end of try
                catch(PDOException $error)
                {
                    $error->getMessage();
                }
                ?>
         <div class="clearfix"></div>
       </div><!-- #gallery end -->
        </div>

CSS

 #gallery-container1{
 margin-top:15vh;
 text-align:center;
 margin-bottom:10vh;
}
  .img-container1 {
  width:16.5%;
   display:inline-block;
  margin-bottom:30px;
   }
  .img-content1 {
   padding:0;
   height:auto;
  overflow:hidden;
   /*box-shadow:0 .8px .8px #ccc*/
  width:80%;
   }
 .img-content1 img {
   width:100%;
   height:auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
  -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
}
 .clearfix {
 clear:both;
  }
  @media only screen and (max-width: 560px) {
 .img-container1 {
  width:98%;
  margin-left:10%;
  } 
  }
  @media only screen and (min-width: 600px)and (max-width: 900px) {
  .img-container1 {
  width:38%;
  padding:1%;
  } 
  }
  .img-content1 .hover-image,
  .img-content1 :hover .thumbnail-image {
  display: none;
 }
 .img-content1:hover .hover-image {
  display: block;
 cursor: pointer
 }
   .fade-in {
   opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.6s;
  }
  @keyframes fadeInOpacity {
  0% {
    opacity: 0;
   }
   100% {
    opacity: 1;
   }
    }

Answer 1

Try to do styling all classes by:

*{
   border: 1px solid red;
  }

Then try to look where there is a problem. Send me the screenshot after doing so.