One icon has a width bigger than others after identify width in css-CodePudding

after i using a CSS for the fa icon to identify width and height for the container, and the first icon has a bigger width than others, and i couldn't get it a right width. Is there anyway that could make it right.

#features {
    margin-top: 35px;
}

.grid {
    display: flex;
}

#features .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20vw;
    height: 125px;
}

#features .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;

}

<html>
<head>
<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<div >
            <section id="features">
                <div >
                    <div >
                        <i ></i>
                    </div>
                    <div >
                        <h2>Premium Materials</h2>
                        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                    </div>
                </div>
                <div >
                    <div >
                        <i ></i>
                    </div>
                    <div >
                        <h2>Fast Shipping</h2>
                        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not statisfied.</p>
                    </div>
                </div>
                <div >
                    <div >
                        <i ></i>
                    </div>
                    <div >
                        <h2>Quality Assurance</h2>
                        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
                    </div>
                </div>
            </section>
        </div>

CodePudding user response：

Change width to min-width

#features {
    margin-top: 35px;
}

.grid {
    display: flex;
}

#features .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20vw; /* Change Here*/
    height: 125px;
}

#features .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;

}

<html>
<head>
<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<div >
            <section id="features">
                <div >
                    <div >
                        <i ></i>
                    </div>
                    <div >
                        <h2>Premium Materials</h2>
                        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                    </div>
                </div>
                <div >
                    <div >
                        <i ></i>
                    </div>
                    <div >
                        <h2>Fast Shipping</h2>
                        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not statisfied.</p>
                    </div>
                </div>
                <div >
                    <div >
                        <i ></i>
                    </div>
                    <div >
                        <h2>Quality Assurance</h2>
                        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
                    </div>
                </div>
            </section>
        </div>