Messed up my code trying to implement flexbox - css

Question

So I was trying to implement flexbox into my container and it got messed up. I want the text to go beneath the circles, spaced and centered neatly and have it done via flexbox please. I am so lost in this code that I cannot figure this out, any help is greatly appreciated. It says I need t add more details but I can't think of any so this is just type.
.bottom__container {
background-color:rgba(255, 236, 0, 0.7);
text-align: center;
margin:0;
padding: 8px;
color: black;
font-family: 'Kalam', cursive;
font-weight: bolder;
font-size: 1.5rem;
}
.bottom__container li {
list-style: none;
display: inline-block;
padding: 32px;
}
.btm-container__why {
font-size:2.5rem;
margin:0;
}
.btm-container__depends {
font-size: small;
text-align: right;
font-family: initial;
}
.circle {
width: 128px;
height: 128px;
border: 2px solid #424242;
border-radius: 50%;
margin: auto;
background-color: white;
}
.icon {
margin-top: 20%;
}
<section class="btm-containers">
<section id="scroll" class="bottom__container">
<div>
<h1 class="btm-container__why">Why Choose Us?</h1>
<ul>
<li class="lists">
<div class="circle">
<div class="icon"><i class="fa fa-users fa-3x" aria-hidden="true"></i></div>
</div>
<p>Thousands of Clients</p>
</li>
<li class="lists">
<div class="circle">
<div class="icon"><i class="fa fa-handshake-o fa-3x" aria-hidden="true"></i></div>
</div>
<p>Online/In-person Consultations*</p>
</li>
<li class="lists">
<div class="circle">
<div class="icon"><i class="fas fa-directions fa-3x"></i></div>
</div>
<p>Guided Tours*</p>
</li>
<li>
<div class="circle">
<div class="icon"><i class="fa fa-building-o fa-3x" aria-hidden="true"></i></div>
</div>
<p>Affordable Rent!*</p>
</li>
</ul>
<p class="btm-container__depends">*Depends on service purchased.</p>
</div>
</section>

Answer 1

Is there a reason why you put "lists" as a class for both ul and li? and then in your CSS you also selected "lists li". Put another class or change it for one of them, and then you should be able to center it.
Try cleaning up your code first. You have various mistakes such as
<li class="lists">
<div class="circle">
<div class="icon"><i class="fas fa-directions fa-3x"></i></div>
<p>Guided Tours*</p>
</div>
</li class="lists">
<li>
and I think you'd have an easier time debugging if you had it organized.

Answer 2

The problem is with the class for both ul and li (lists) also with padding here is your desired result:
<section id="scroll" class="btm-container">
<div>
<h1 class="btm-container__why">Why Choose Us?</h1>
<ul class="lists">
<li class="list-item">
<div class="position-relative d-flex flex-column align-items-center justify-content-center">
<div class="circle icon"><i class="fa fa-users fa-3x" aria-hidden="true"></i></div>
<p>Thousands of Clients</p>
</div>
</li>
<li class="list-item">
<div class="position-relative d-flex flex-column align-items-center justify-content-center">
<div class="circle icon"><i class="fa fa-handshake-o fa-3x" aria-hidden="true"></i></div>
<p>Online/In-person Consultations*</p>
</div>
</li>
<li class="list-item">
<div class="position-relative d-flex flex-column align-items-center justify-content-center">
<div class="circle icon"><i class="fas fa-directions fa-3x"></i></div>
<p>Guided Tours*</p>
</div>
</li>
<li class="list-item">
<div class="position-relative d-flex flex-column align-items-center justify-content-center">
<div class="circle icon"><i class="fa fa-building-o fa-3x" aria-hidden="true"></i></div>
<p>Affordable Rent!*</p>
</div>
</li>
</ul>
<p class="btm-container__depends">*Depends on service purchased.</p>
</div>
</section>
and CSS
.btm-container {
background-color:rgba(255, 236, 0, 0.7);
text-align: center;
margin:0;
padding: 8px;
color: black;
font-family: 'Kalam', cursive;
font-weight: bolder;
font-size: 1.5rem;
}
.bottom__container li {
list-style: none;
display: inline-block;
padding: 32px;
}
.lists {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 2rem;
text-align: center;
margin-top: 20px;
}
.btm-container__why {
font-size:2.5rem;
margin:0;
}
.btm-container__depends {
font-size: small;
text-align: right;
font-family: initial;
}
.list-item {
flex-grow: 1;
flex-basis: 0;
p {
position: absolute;
padding: 0 70px;
}
}
.circle {
width: 128px;
height: 128px;
border: 2px solid #424242;
border-radius: 50%;
margin: 0;
background-color: white;
}
.d-flex {
display: flex
}
.align-items-center {
align-items: center;
}
.flex-column {
flex-direction: column;
}
.justify-content-center {
justify-content: center;
}
.position-relative {
position: relative;
}