php - CSS: First row of image gallery coming out diagonal? -

i have array of images in php trying display gallery. working pretty well, except first row of gallery comes out diagonal, each image below 1 before it.

here code using:

css

.gallery {       margin: 5px;       border: 1px solid #ccc;       float: left;       display: inline;       width:180px;       height:180px;     }      .gallery:hover {         border: 1px solid #777;     }      .gallery img {         max-height:100%;         max-width:100%;         margin:0 auto;     } 

html/php

<div class="gallery-container"> <?php     $count = 0;     foreach($images $image) {         echo "<div class='gallery'><a href=''><img src='".$dir.$image."'/></a></div>"; //$dir path image         if(count % 4 == 0) {             echo "<br>";         }         $count = $count + 1;     } ?> </div> 

here screenshot of result on first row:

all other rows come out fine. thank help.

if want using float, better this:

css

.gallery{   margin: 5px;   border: 1px solid #ccc;   float: left;   display: block;   width:180px;   height:180px; } .gallery.clear-left{   clear: left; } 

php/html

<div class="gallery-container"> <?php     $count = 0;     foreach( $images $image ){?>         <div class="gallery <?php echo( 0 == $count % 4 ? 'clear-left' : '' );?>">             <a href="">                 <img src="<?php echo $dir.$image;?>">             </a>         </div>     <?php         $count++;     } ?> </div> 

but there better solution this, called flex: