Irregular Spacing Between List Items

Question

Bear with me I am new at this

I have been faced with an issue of irregular spacing between list items, it looks like the image below. First, when I did not as many list items, it was normal, then once I exceeded a number, which I do not know it started showing spaces:

I played around with it some and apparently margins have nothing to do with it. Below are the HTML5 code and the CSS for the gallery and the list items. Here is my code:

CSS

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin-left: 2.5%;
  margin-bottom: 2.5%;
  background-color: #212121;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

HTML

<ul id="gallery">
            <br>
            <li class="search-item" data-title="Abraham Lincoln">
                <div id="al1930">
                    <img id="as1930" class="thumbs" onclick="transport(movie1.title, movie1.description, movie1.director, movie1.distributer, movie1.releasedate, movie1.link)" src="img/Abraham%20Lincoln%20Poster.jpg" alt="">
                </div>
                <center>
                    <p>Abraham Lincoln</p>
                </center>
            </li>
            <li class="search-item" data-title="Night of the Living Dead">

                <div id="nld1968">
                    <img id="nld1968" class="thumbs" onclick="transport(movie2.title, movie2.description, movie2.director, movie2.distributer, movie2.releasedate, movie2.link)" src="img/p3946_d_v8_ac.jpg" alt="">
                </div>
                <center>
                    <p>Night of the Living Dead</p>
                </center>
            </li>
            <li class="search-item" data-title="Africa Screams">
                <div id="as1949">
                    <img id="as1949" class="thumbs" onclick="transport(movie3.title, movie3.description, movie3.director, movie3.distributer, movie3.releasedate, movie3.link)" src="img/images.jpeg" alt="">
                </div>
                <center>
                    <p>Africa Screams</p>
                </center>
            </li>
            <li class="search-item" data-title="Born To Win">
                <div id="btw1971">
                    <img id="btw1971" class="thumbs" onclick="transport(movie5.title, movie5.description, movie5.director, movie5.distributer, movie5.releasedate, movie5.link)" src="assets/Dvd_Born_to_Win.jpg" alt="">
                </div>
                <center>
                    <p>Born to Win</p>
                </center>
            </li>
            <li class="search-item" data-title="Meet John Doe">
                <div id="mjd1941">
                    <img id="mjd1941" class="thumbs" onclick="transport(movie6.title, movie6.description, movie6.director, movie6.distributer, movie6.releasedate, movie6.link)" src="assets/220px-Poster_-_Meet_John_Doe_01.jpg" alt="">
                </div>
                <center>
                    <p>Meet John Doe</p>
                </center>
            </li>
            <li class="search-item" data-title="Charade">
                <div id="c1963">
                    <img id="c1941" class="thumbs" onclick="transport(movie7.title, movie7.description, movie7.director, movie7.distributer, movie7.releasedate, movie7.link)" src="img/220px-Charade_movieposter.jpg" alt="">
                </div>
                <center>
                    <p>Charade</p>
                </center>
            </li>
            <li class="search-item" data-title="The Terror">
                <div id="tt1963">
                    <img id="tt1963" class="thumbs" onclick="transport(movie8.title, movie8.description, movie8.director, movie8.distributer, movie8.releasedate, movie8.link)" src="img/the-terror.jpg" alt="">
                </div>
                <center>
                    <p>The Terror</p>
                </center>
            </li>
            <li class="search-item" data-title="Angel and the Badman">
                <div id="ab1947">
                    <img id="ab1947" class="thumbs" onclick="transport(movie9.title, movie9.description, movie9.director, movie9.distributer, movie9.releasedate, movie9.link)" src="img/AngelandtheBadman.jpeg" alt="">
                </div>
                <center>
                    <p>Angel and the Badman</p>
                </center>
            </li>
            <li class="search-item" data-title="Rock, Rock, Rock!">
                <div id="rrr1956">
                    <img id="rrr1956" class="thumbs" onclick="transport(movie10.title, movie10.description, movie10.director, movie10.distributer, movie10.releasedate, movie10.link)" src="img/RockRockRock.gif" alt="">
                </div>
                <center>
                    <p>Rock, Rock, Rock!</p>
                </center>
            </li>

        </ul>

Answer 1

You can use display inline block instead of float, check following css

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0px; 
}
#gallery li {
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
    width: 45%;
    margin-left: 2.5%;
    margin-bottom: 2.5%;
    background-color: #212121;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}