I am facing an issue with the carousel display. It appears perfectly centered on desktop and laptop screens but shifts to the right on mobile devices. I checked using Chrome developer tools and everything seems aligned correctly within the container. Here are the HTML and CSS snippets for reference:
HTML
<!-- Records -->
<section class="dark-section" id="artists">
<h1>Featured Artists</h1>
<div id="records-carousel" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#records-carousel" data-slide-to="0" class="active"></li>
<li data-target="#records-carousel" data-slide-to="1"></li>
<li data-target="#records-carousel" data-slide-to="2"></li>
<li data-target="#records-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active container-fluid">
<img src="images/ali-handal.jpg" alt="ali-handal-img">
<br>
<br>
<a href="https://shop.alihandal.com/collections/recorded-music-by-ali-handal"><h3>Ali Handal</h3></a>
</div>
.... (additional carousel items)
<a class="carousel-control-prev" href="#records-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#records-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</section>
CSS
a {
color: inherit;
}
body {
font-family: "Ropa Sans", sans-serif;
text-align: center;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Ropa Sans", sans-serif;
}
/* Containers */
.container-fluid {
padding: 2% 15%;
}
/* Headings */
.big-heading {
font-size: 3.5rem;
line-height: 1.5;
padding-top: 5%;
}
/* Sections */
.dark-section {
background-color: #121111;
color: #fff;
}
.light-section {
background-color: #F3F1F1;
color: black;
}
/* Records-Carousel */
#artists {
padding: 100px;
}