Good day to you!
I'm currently working on a sidebar layout using Bootstrap's list-group and I need to set a specific width to ensure it aligns properly with the other elements above and below it. However, when I try setting the width to 300px, the container ends up aligned to the left instead of the center as desired (see image below).
My attempts to use align-items: center with flex-direction: column resulted in the container becoming too narrow, not taking the specified 300px width, despite being centered.
I also experimented with display: inline and margin: 0 auto, but unfortunately, these approaches were not responsive.
After applying max-width: 300px, this is how the layout currently appears:
https://i.sstatic.net/lA8mV.jpg
Below is the code snippet:
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;
}
Any suggestions on how to center-align the container?