Items are not aligned in the center - css

Question

enter image description here
i am trying to align all the .features items in the center but for some reason only the first one is doing it. I do not find the reason, please help.
<section>
<div class="features">
<div><i class="fa-solid fa-fire"></i></div>
<div>
<h2>Premium Materials</h2>
<p class="p-description">
Our guitars are built with the best amazonian wood
</p>
</div>
</div>
<div class="features">
<div>
<i class="fa-solid fa-truck-fast"></i>
</div>
<div>
<h2>Shipping</h2>
<p class="p-description">
We make sure you recieve your trombone as soon as we have finished
making it. We also provide free returns if you are not satisfied.
</p>
</div>
</div>
<div class="features">
<div><i class="fa-solid fa-user-check"></i></div>
<div>
<h2>Satisfaction</h2>
<p class="p-description">
For every purchase you make, we will ensure there are no damages or
faults and we will check and test the quality of your instrument.
</p>
</div>
</div>
</section>
css
body {
background-color: #eff1ed;
font-family: "Roboto", sans-serif;
}
/* Header and nav bar */
header {
display: flex;
}
.logo-guitar {
padding: 2% 1% 3% 2%;
}
.luthier-name {
width: 100%;
padding: 1.5% 0 0 1%;
}
#nav-bar {
display: flex;
text-align: center;
justify-content: space-between;
flex-direction: row;
}
.nav-link {
width: 94px;
text-align: center;
margin: 2px auto;
padding-top: 15%;
color: #131b23;
text-decoration: none;
font-weight: bold;
}
h1 {
font-family: "Satisfy", cursive;
font-size: 3rem;
}
/* email form */
.email-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#email {
height: 25px;
width: 100%;
}
#submit {
width: 80%;
margin-top: 5%;
background-color: #ffe121;
border: 0;
font-weight: bold;
height: 35px;
font-family: inherit;
font-size: large;
}
/* Features */
.fa-solid {
color: #e3170a;
font-size: 50px;
}
.features {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
}
.p-description {
width: 80%;
}
section {
padding-top: 10%;
}
If all them have the same class i do not understan why this is happening. I was trying to uso console to find the reason but i'm stuck.

Answer 1

It seems that the .p-description has a width based on its content (it is set in percentage, but its container also does not have a defined width), therefore it gets wider with more text inside, which result in unexpected different looks.
You can define width of .p-description with a value independent to its content and it should make them have same width, such as in px, em, vw, or vh.
Example:
.p-description {
max-width: 350px;
}
Or the layout of its container and parent container can be adjusted to properly contain various length of content in .p-description, but it does take a bit more of refactoring.
Hope that it helps!