I am struggling with aligning my images properly in a responsive gallery using Bootstrap's grid system. Despite numerous attempts, the divs are consistently off-center to the left, and I can't seem to adjust their padding or center the images within each div. You can see the issue here. I have experimented with overflow:hidden; as well as tweaking paddings and margins without success.
As a result of this misalignment, the entire gallery appears skewed and the last image in each row gets clipped on the right edge.
Here is a snippet of my code:
ul.gallery{
overflow: hidden;
padding-left: 0px;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.presumiendo{
padding-top: 100px;
padding-bottom: 20px;
margin-bottom: 20px;
text-align: center;
border-bottom: 2px solid #A59391;
font-family: 'Merriweather';
color: #A59391;
font-weight: 250;
letter-spacing: 2px;
margin-left: 0px;
margin-right: 0px;
}
.align-icon{
left: 0px;
}
.images-portfolio {
border-left: 0px;
margin: 20px 20px 20px 20px;
display: inline;
width:100%;
z-index: 1;
border-radius: 50%;
display: inline-block;
padding-left: 0px;
}
/* more CSS styles here... */
Your help in resolving this issue would be greatly appreciated. Thank you!