无法将 Bootstrap 列表组容器居中

Question

希望你今天做得很好。

所以我正在使用 Bootstrap 的列表组在侧边栏上工作，我想应用一个特定的宽度，以便它与其他两个元素（顶部和底部）对齐。在我使用 300px 作为宽度后，容器向左对齐，如下图所示。但我希望它位于中心。

我尝试了align-items: center，因为容器使用的是flex-direction: column，但后来它变得太薄了，尽管它移动到了中心，但它的宽度并不需要 300px。

我也尝试过使用display: inline 和margin: 0 auto，但它没有响应。

这是我使用max-width: 300px后的样子：

代码如下：

HTML：

<div class="col-lg-4 col-sm-12">

      <div class="ad-space">
             <img src="https://via.placeholder.com/300.png" class="">
      </div>

      <div class="list-group recent-articles-container my-5">
              <div class="card-header">
                     <h2>Recent Articles</h2>
              </div>

              <div>
                     <a href="#" class="list-group-item list-group-item-action">Lorem Ipsum</a>
                     <a href="#" class="list-group-item list-group-item-action">Lorem Ipsum</a>
                     <a href="#" class="list-group-item list-group-item-action">Lorem Ipsum</a>    
              </div>
      </div>

      <div class="ad-space">
              <img src="https://via.placeholder.com/300.png" class="">
      </div>

</div>

CSS：

.list-group {
    max-width: 300px !important;
}

我怎样才能把它移到中心？

Answer 1

显然我必须在list-group 中使用width: 100%。

这是css：

.list-group {
    width: 100% !important;
    max-width: 300px !important;
}