Using this particular Bootstrap modal on a website (simplified version with fewer list items):
#manufacturer-modal .modal-body {
padding: 0;
}
#manufacturer-modal .nav-item {
list-style: none;
}
#manufacturer-modal .nav-link {
font-size: 1.2em;
font-weight: 500;
letter-spacing: -1px;
display: flex;
align-items: center;
justify-content: left;
width: 100%;
height: 3.5em;
border-bottom: 1px solid #dee2e6;
padding: 0;
}
#manufacturer-modal .nav-link img {
width: 80%;
max-width: 2.6em;
margin: 0 1.5em;
display: block;
}
.show {
display: block !important;
}<div class="modal-body">
<li class="nav-item">
<a class="nav-link" href="#">
<img src="/images/badges/img.svg" alt="">
<span>Item 1</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src="/images/badges/img.svg" alt="">
<span>Item 2</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src="/images/badges/img.svg" alt="">
<span>Item 3</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src="/images/badges/img.svg" alt="">
<span>Item 4</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src="/images/badges/img.svg" alt="">
<span>Item 5</span></a>
</li>
</div>Initially, the alignment is to the left, which looks neat, but centering it would enhance the appearance:
https://i.sstatic.net/mcBXy.png
However, when I attempt to center it using justify-content:center, the tidy left alignment is lost:
https://i.sstatic.net/PgSkL.png
Is there a way to maintain the left alignment while centering the items within the modal? I believe it may involve adjusting margins and padding, but my attempts in the dev tools have not been successful. I seem to be missing something and require guidance.