'Photo grid seem doesn't fit properly

i have some issues with photo grid. its like have a padding on right side, i have put rule like padding-right 0 or margin-right or right 0 and still see the issues.

doesnt fit properly

here my workaround 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;
}

thank you, sorry for bad grammar.

htmlcss


Solution 1:[1]

try put margin: 0; padding: 0 in your css

Solution 2:[2]

The problem is that the images are each 30% width floated left with only a small margin that doesn't offset the 10% gap left over.

What I would do: -Delete margin for #photos img -Change width to 33.33% -Add desired padding (2px for instance) -Add box-sizing: border-box to include padding in width

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 funderjimed ieinc
Solution 2

Related Questions