I am currently facing an issue where my images are not displaying at 100% width within a container when I have a wide screen. Instead, there are spaces between the images. How can I fix this problem?
See below for the code:
<div class="container-responsive">
<footer>
<div class="row no-gutter">
<div class="col-md-4 col-sm-12 col-lg-4 no-padding">
<a href="#"><img src="images/but-plan.png" alt="Plan" /></a>
</div>
<div class="col-md-4 col-sm-12 col-lg-4 no-padding">
<a href="#"><img src="images/but-administration.png" alt="Administration" /></a>
</div>
<div class="col-md-4 col-sm-12 col-lg-4 no-padding">
<a href="#"><img src="images/but-our-team.png" alt="Our Team" /></a>
</div>
</div>
</footer>
</div> <!-- container -->
CSS
footer a {
display:block;
}
footer img {
max-width:100%;
height:auto;
}
/*******************************************************/
/******************* Helper Classes ********************/
/*******************************************************/
.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}