html - 照片网格似乎不合适

我的照片网格有一些问题。
它就像在右边有填充，我已经把规则像padding-right 0
或margin-right或right 0，仍然可以看到问题。

doesnt fit properly

这是我的解决方法https://codepen.io/RIN-id/pen/ZrzyZB


  index.html

<ul id="photo-gallery">


    <li>
        <a href="a.jpg" data-description=" Mulak Mar-onan (Kapal Tuktuk)">
                          <img src="img/galery/a.jpg" >
                        </a>
    </li>




</ul>

  styles.css

 #photos {
  width: 100%;
  height: 100%;

}

#photo-gallery {
  width: 100%;
  overflow: scroll;

  /*! overflow-x: scroll; */
}
  h3 {font-size: 20px; color: #fff;}

#photos img {
  width: 30%;
  float: left;
  display: block;
  margin: 2px;

}

ul {
  list-style: none;
  margin: 0px auto;
  padding: 10px;
  display: block;
  max-width: 780px;
  text-align: left;
}

#overlay {
  background: rgba(0,0,0, .8);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  text-align: center;
  z-index: 5000;
}

#overlay img {
  margin: 10% auto 0;
  width: 100%;
  border-radius: 5px;
  z-index: 5000;
  position: relative;
  padding-top: 113px;
}

谢谢，抱歉语法不好。

最佳答案

尝试放置保证金：0;填充：0在您的CSS

关于html - 照片网格似乎不合适，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48483269/