I've been struggling to make my carousel images responsive by using the img-fluid tag, but I haven't had any success. I've attempted using !important and display: block, but nothing seems to work. I'm not sure what's causing the issue. Any advice or suggestions?
.container{
font-size: 32px;
font-family: 'Inter', sans-serif;
position:relative;
top: 150px;
right:-15px;
font-weight: 300;
width: 1440px;
letter-spacing: 2px;
}
.item{
float:right;
}
<div class="container">
<div class="carousel-inner">
<div class="item active">
<img class="image img-fluid" src="images/image-tanya.jpg" alt="Tanya" style="height:648px; width:648px;" ><div class="carousel-caption">
</div>
</div>
<div class="item ">
<img class="image img-fluid" src="images/image-john.jpg" alt="John" style="height:648px; width:648px;">
</div>