Gallery display horizontally with images with the same size - html

Question

I'm working on HTML and CSS and I'm having a hard time aligning the images horizontally instead of vertically.
I tried displaying them inline-block and inline none of them works. And I also want my images to have the same sizes.
Here's my html code:
#gallery {
width: 500px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 100px auto;
display: inline;
}
#gallery img {
width: 50%;
height: auto;
border: 5px solid #FFFFFF;
margin: 10px;
box-sizing: border-box;
margin: 0 auto;
padding: 0;
}
<div id="gallery">
<img src="images/gallery1.png">
<img src="images/gallery2.png">
<img src="images/gallery3.png">
<img src="images/gallery4.png">
<img src="images/gallery5.png">
<img src="images/gallery6.png">
<script src="lightbox2-master/dist/js/lightbox-plus-jquery.js"></script>
</div>

Answer 1

Try this:
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<div class="gallery">
<a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee">
<img src="images/gallery1.png" width="600" height="400">
</a>
</div>
<div class="gallery">
<a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee">
<img src="images/gallery1.png" width="600" height="400">
</a>
</div>
<div class="gallery">
<a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee">
<img src="images/gallery1.png" width="600" height="400">
</a>
</div>
<div class="gallery">
<a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee">
<img src="images/gallery1.png" width="600" height="400">
</a>
</div>
<div class="gallery">
<a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee">
<img src="images/gallery1.png" width="600" height="400">
</a>
</div>
<div class="gallery">
<a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee">
<img src="images/gallery1.png" width="600" height="400">
</a>
</div>

Answer 2

Simpler answer. Add a float to your image.
#gallery {
width: 500px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 100px auto;
display: inline;
}
#gallery img {
float: left;
width: 50%;
height: auto;
border: 5px solid #FFFFFF;
margin: 10px;
box-sizing: border-box;
margin: 0 auto;
padding: 0;
}