I'm trying to get all the images on my page to have full width, but I'm seeing some padding on the right and left edges. How can I fix this issue? Here is a screenshot of the problem:https://i.sstatic.net/bRXR2.jpg
Below is the HTML code I am using:
<div class="container-fluid">
<div class="col"><a href="about.html"><img style="object-position: 60% 0%;" src="images/Life/1.jpg" alt=""></a></div>
<div class="col"><a href=""><img src="images/Life/3.jpg" alt=""></a></div>
<div class="col"><a href=""><img src="images/Lakers/L1000857.JPG" alt=""></a></div>
<div class="col"><a href=""><img src="images/Lakers/L1000883.JPG" alt=""></a></div>
<div class="col"><a href=""><img src="images/Others/1.jpg" alt=""></a></div>
<div class="col"><a href=""><img src="images/Others/2.jpg" alt=""></a></div>
<div class="col"><a href=""><img style="object-position: 60% 0%;" src="images/About/About me.jpg" alt=""></a></div>
</div>
and here is the relevant CSS:
.container-fluid{
padding: 0 !important;
margin: 0 !important;
}
img{
padding: 0 !important;
margin: 0 !important;
height: 350px;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
object-position: 60% 30%;
}