After creating 3 inline divs, each taking up 33.333% of their parent width, I encountered an issue while trying to insert images into them. Whenever the image exceeds the 33.333% width of the div, it overflows outside the container. My goal is to make the image span the full width of the parent container but I haven't been successful.
.wrapper {
width: 70%;
margin: 0 auto;
height: 100%;
}
.gallery-container {
font-size: 0px;
line-height: 0;
margin-bottom: 15px;
}
.gallery-element {
display: inline-block;
width: 33.33333%;
}
.responsive {
width: 100%;
height: auto;
}<div class="wrapper">
<section>
<div class="gallery-container">
<div class="gallery-element">
<img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
</div>
<div class="gallery-element">
<img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
</div>
<div class="gallery-element">
<img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
</div>
</div>
</section>
</div>