CSS: First row of image gallery coming out diagonal?
<p>I have an array of images in php that I am trying to display as a gallery. It is working pretty well, except that the first row of the gallery comes out diagonal, with each image slightly below the one before it. </p>

<p>Here is the code I am using:</p>

<p><strong>CSS</strong></p>

<pre><code>.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;
    }
</code></pre>

<p><strong>HTML/PHP</strong></p>

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

<p>Here is a screenshot of the result on the first row:
<a href="https://i.stack.imgur.com/hS5za.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hS5za.jpg" alt="enter image description here"></a></p>

<p>All the other rows come out fine. Thank you very much for any help.</p>