I'm currently working on the design for a homepage where I want to showcase the same image repeated 4 times in a row, creating a decorative banner effect. Each image is set to occupy 25% of the screen width, which should theoretically fit perfectly side by side in a single row. However, it seems that Bootstrap may be introducing some spacing between the images, causing the fourth one to spill over into the next row.
I've attempted to address this issue by setting the margin, padding, and border-style of the images to zero. My intention was to override any default styles that Bootstrap might apply to the <img> tag, but the spacing issue persists. Even after inspecting the elements with browser Developer Tools, no margin, padding, or border seems to be affecting the images. I'm unsure of what else I can target to fix this discrepancy.
Any suggestions would be highly appreciated. Thank you for taking the time to assist me.
NOTE: I have opted not to use Grid, as I believed this task could be accomplished without utilizing it.
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
.back-banner {
width: 25%;
opacity: .5;
padding: 0;
margin: 0;
}