Попытка выровнять по горизонтали 5 изображений. Одно изображение не в линии

Question

Все, что я пытаюсь сделать, это выровнять по горизонтали 5 изображений. Я могу отлично выровнять 4 из них. Но первое выше, чем все остальные ... тот же исходный код, то же изображение, то же самое все! Любая помощь высоко ценится.

Код:

<style>
    #gallery {
    float: left;
    width: 100%;
        margin-top: -125px;
    margin-right: 30px;
    margin-left: 10px;
    border-right: white 1px dotted;
    }
    #gallery img {
        float: left;
    display: inline-block;
    margin: 0 0 100px 10px;
    border: 1px solid rgb(0,0,0);
   }
    #photo {
    margin-left: 150px;
    position: relative;
    }
    #photo img {
    position: absolute;
    }

    a {
    outline: none;
        vertical-align: top;
    }

    a img {
    border: 1px solid #BBB;
    padding: 2px;
    margin: 10px 20px 10px 0;

    }

    a img.last {
    margin-right: 0;    
    }
</style>

    <a href="../wp-content/uploads/2019/11/slide1.png"><img src="../wp-content/uploads/2019/11/Blank- 
   Person-Imagesmall1.jpg" width="100" height="100" alt="person 1k"></a> 

    <a href="../wp-content/uploads/2019/11/slide1.png"><img src="../wp-content/uploads/2019/11/Blank- 
    Person-Imagesmall1.jpg" width="100" height="100" alt="person 2"></a> 

    <a href="../wp-content/uploads/2019/11/slide1.png"><img src="../wp-content/uploads/2019/11/Blank- 
    Person-Imagesmall1.jpg" width="100" height="100" alt="person 3"></a> 

    <a href="../wp-content/uploads/2019/11/slide1.png"><img src="../wp-content/uploads/2019/11/Blank- 
    Person-Imagesmall1.jpg" width="100" height="100" alt="person 4"></a> 

    <a href="../wp-content/uploads/2019/11/slide1.png"><img src="../wp-content/uploads/2019/11/Blank- 
    Person-Imagesmall1.jpg" width="100" height="100" alt="person 5"></a>