An element moves at a certain point when resizing the browser

Question

I just wanted to create a responsive image gallery. Everything is working well when I am using the px unit for the width of my ".gallery". However, when I use "%" for the width there is a certain point where one of the galleries moves up when adjusting the browser. I already search for answers but I can't see that fit my concern. I just wanted the image galleries to stay in their straight position inside my main container even though I am adjusting the browser.

`*{
    box-sizing: border-box;
    margin:0px;
  }

 header{
    background-color: hsl(0, 0%, 50%);
    padding:4%;

  }

 .container{
    height:20vw;
    margin:5%; 

  }

  h1{
    text-align: center;
    }

  .gallery{
    max-width:100%;
    height:100%;
    text-align:center;
    display:inline-block;
    border:1px solid hsl(0, 0%, 70%);  
    }
  .gallery img{
   width:100%;
   height:75%;
   display:block;
  }

 .car_names{
      background-color: hsl(0, 0%, 50%);
      padding:2%;
      font-size: .7em;
      height:25%;

  }
 .gallery:hover{
  border:2px solid black;
  font-weight:bold;

  }

  @media screen and (max-width:600px)
 {
   .gallery{
    display:block;
    margin-bottom:1%;
    width:auto;
    height:auto;
    }
    }`

enter image description here