html - 照片网格似乎不合适

Question

我对照片网格有一些疑问。 它就像在右侧有一个填充，我已经把规则设置为 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;
}

谢谢，抱歉语法不好。

Answer 1

尝试放置 margin :0； padding: 0 在你的 CSS 中