Image Gallery collapse

HI there,

When I publish new post with an image gallery everything works well but when I zoom out or in, in browser the spacing between images gets really distorted, on zoom out there is huge amount of white space and on zoom in the images collapse onto each other. I am running in localhost right now so I dont have any link to website, here is copy paste from inspect element:

<div id="gallery-1" class="gallery galleryid-77 gallery-columns-7 gallery-size-thumbnail">

    <dl class="gallery-item"></dl>
    <dl class="gallery-item">
        <dt class="gallery-icon landscape">
            <a data-rel="lightbox[gallery-1]" href="not important">

                <img class="attachment-thumbnail" width="150" height="150" alt="image2" src="not important"></img>
            </a>
        </dt>
    </dl>
    <dl class="gallery-item"></dl>
    <dl class="gallery-item"></dl>
    <dl class="gallery-item"></dl>
    <dl class="gallery-item"></dl>
    <dl class="gallery-item"></dl>
    <br style="clear: both"></br>
    <dl class="gallery-item"></dl>
    <dl class="gallery-item"></dl>
    <br style="clear: both"></br>

</div>

and this is my css for the gallery:

.gallery {

   margin-top: 50px;
   margin-bottom: 20px;
   margin-left: 0;
   margin-right: 0;

}

.gallery a {

	margin: 0;
	display: inline;
    background: black;
    padding: 0;

}

.gallery-item {

   text-align: center;
   width: 14%;
   display: inline-block;

}

.gallery img {

   border: 0;
   display: block;
   transform: scale(1);
   margin: 0;
   padding: 0;

}
.gallery-caption {

   margin-left: 0;

}