如图：前两行表现正常，但最后一行中间间距突然变小了，请问是什么原因？

html

                <ul class="program-investment">
                    <li v-for="(item, index) in detailProgramInfo.statistics" :key="index">
                        <p>{{ item.name }}</p>
                        <p>
                            {{ item.sum }}
                            <span>{{ item.unit }}</span>
                        </p>
                    </li>
                </ul>

script

            detailProgramInfo: {
                statistics: [
                    { name: '总投资', sum: 54883, unit: '万元' },
                    { name: '本年计划投资', sum: 12468, unit: '万元' },
                    { name: '本年累计完成投资', sum: 3485, unit: '万元' },
                    { name: '自开工累计完成', sum: 2468, unit: '万元' },
                    { name: '完成总投资比例', sum: 34, unit: '%' },
                    { name: '完成计划投资比例', sum: 43, unit: '%' }
                ],
               

scss

        .program-investment {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li {
                flex: 0 0 40%;
                margin-bottom: 12px;
                padding-top: 16px;
                padding-bottom: 16px;
                padding-left: 21px;
                background-color: #F8F8F8;
                p {
                    font-size: 14px;
                    color: #8A8F99;

                    &:last-child {
                        margin-top: 12px;
                        font-size: 20px;
                        color: #2E3033;

                        span {
                            font-size: 14px;
                        }
                    }
                }
            }

          

        }