Bootstrap 4 Carousel 在移动视口上不偏离中心

Question

轮播在台式机和笔记本电脑视口上显示正常，但在移动视口上偏向右侧显示。没有任何明显的突出之处，使用 Chrome 开发人员工具，容器似乎对齐得很好，但无论出于何种原因，轮播位置本身在视觉上向右移动。 HTML 和 CSS sn-ps 供参考。

HMTL

    <!-- 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>
          <div class="carousel-item container-fluid">
            <img src="images/david-newbould.jpg" alt="david-newbould-img">
            <br>
            <br>
            <a href="http://davidnewbould.com/discography-for-david-newbould/"><h3>David Newbould</h3></a>
          </div>
          <div class="carousel-item container-fluid">
            <img src="images/debra-devi.jpg" alt="debra-devi-img">
            <br>
            <br>
            <a href="https://debradevi.com/store"><h3>Debra Devi</h3></a>
          </div>
          <div class="carousel-item container-fluid">
            <img src="images/neal-fox.jpg" alt="neal-fox-img">
            <br>
            <br>
            <a href="https://www.therealnealfox.com/shop/"><h3>Neal Fox</h3></a>
          </div>
          <div class="carousel-item container-fluid">
            <img src="images/sirsy.jpg" alt="sirsy-img">
            <br>
            <br>
            <a href="https://sirsy.com/shop/"><h3>Sirsy</h3></a>
          </div>
          <div class="carousel-item container-fluid">
            <img src="images/sirsy.jpg" alt="sirsy-img">
            <br>
            <br>
            <a href="https://sirsy.com/shop/"><h3>Sirsy</h3></a>
          </div>

        <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;
}

Answer 1

即使在桌面模式下，如果缩小尺寸，您会看到图像向右移动...原因是 div 上的类 container-fluid 和类 carousel-item...所以我们覆盖使用下面的 CSS：

.carousel-inner .container-fluid {
  padding: 0;
}
.carousel-item a {
    position: absolute; 
    top:50%;     
    justify-content: center;
    display: flex; 
    width: 100%;
}

更新：根据提问者的要求

在下面工作sn-p：

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;
}

.carousel-inner .container-fluid {
  padding: 0;
}

.carousel-item a {
  position: absolute;
  top: 50%;
  justify-content: center;
  display: flex;
  width: 100%;
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<!-- 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="https://akberiqbal.com/Jumbo.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>
      <div class="carousel-item container-fluid">
        <img src="images/david-newbould.jpg" alt="david-newbould-img">
        <br>
        <br>
        <a href="http://davidnewbould.com/discography-for-david-newbould/">
          <h3>David Newbould</h3>
        </a>
      </div>
      <div class="carousel-item container-fluid">
        <img src="images/debra-devi.jpg" alt="debra-devi-img">
        <br>
        <br>
        <a href="https://debradevi.com/store">
          <h3>Debra Devi</h3>
        </a>
      </div>
      <div class="carousel-item container-fluid">
        <img src="images/neal-fox.jpg" alt="neal-fox-img">
        <br>
        <br>
        <a href="https://www.therealnealfox.com/shop/">
          <h3>Neal Fox</h3>
        </a>
      </div>
      <div class="carousel-item container-fluid">
        <img src="images/sirsy.jpg" alt="sirsy-img">
        <br>
        <br>
        <a href="https://sirsy.com/shop/">
          <h3>Sirsy</h3>
        </a>
      </div>
      <div class="carousel-item container-fluid">
        <img src="images/sirsy.jpg" alt="sirsy-img">
        <br>
        <br>
        <a href="https://sirsy.com/shop/">
          <h3>Sirsy</h3>
        </a>
      </div>

      <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>