मेरे साथ रहो मैं इसमें नया हूँ

मुझे सूची वस्तुओं के बीच अनियमित अंतर के मुद्दे का सामना करना पड़ा है, यह नीचे की छवि की तरह दिखता है। सबसे पहले, जब मैंने कई सूची आइटम नहीं किए, तो यह सामान्य था, फिर एक बार जब मैं एक संख्या से अधिक हो गया, जो मुझे नहीं पता कि यह रिक्त स्थान दिखाना शुरू कर दिया:

मैंने इसके साथ कुछ खेला और जाहिर तौर पर मार्जिन का इससे कोई लेना-देना नहीं है। गैलरी और सूची आइटम के लिए HTML5 कोड और 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;
}

एचटीएमएल

<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>