CSS flexbox 最后一行更位于右侧

Question

我的 Flexbox 有问题。正如您在这个网站https://www.brigadovnik.cz/chcibrigadu上看到的，最后一排卡片比其他卡片更位于右侧。你不知道问题出在哪里吗？这是我的代码：

HTML：

 <div class="rowCenter">
        <div class="row">
            <?php foreach($brigady as $brigada){ ?>
                <div class="col-md-4">
                    <div class="card text-center">
                        <div class="card-header">
                            <?php if(empty($brigada->img)){ ?>
                                <img class="imgBrg" src="<?php echo base_url(); ?>img/chcibrigadu2.png">
                            <?php }else{ ?>
                                <img class="imgDB" src="<?php echo base_url(); ?>img/<?php echo $brigada->img; ?>"/>
                            <?php } ?>
                        </div>
                        <div class="card-body">
                            <div class="card-text">
                                <?php 
                                    $date1 = strtotime($brigada->datum);
                                    $date2 = strtotime(date('Y-m-d H:i:s'));
                                    $seconds_diff = $date2 - $date1;
                                ?>
                                <?php if(round(abs($seconds_diff) / 86400) == 1){ ?>
                                    <span style="margin-bottom: 10px;" class="tag tag-teal"><?php echo  "Před " ?><?php echo round(abs($seconds_diff) / 86400 ). " dnem"; ?></span>
                                <?php }elseif(round(abs($seconds_diff) / 86400) == 0){ ?>
                                    <span style="margin-bottom: 10px;" class="tag tag-teal"><?php echo  "Přidáno dnes" ?></span>
                                <?php }else { ?>
                                    <span style="margin-bottom: 10px;" class="tag tag-teal"><?php echo  "Před " ?><?php echo round(abs($seconds_diff) / 86400 ). " dny"; ?></span>
                                <?php } ?>
                                <?php if($brigada->udrzitelnost == 1){ ?>
                                    <span style="margin-bottom: 10px; background-color: #87b272;" class="tag tag-teal">Udržitelná firma</span>
                                <?php } ?>
                            </div>
                            <h4 class="brigadaNazev" style="color: #526d45; text-transform: uppercase; font-weight: 700; font-size: 20px; padding-top: 8px;"><?php echo $brigada->nazev; ?></h4>
                            <div class="row rowBrigada" style="display: grid !important;">
                                <h4 style="color: #526d45; background-color: #87b27269; border-radius: 10px; min-width: 210px; height: 30px; margin: 4px; font-size: 20px;"><?php echo $brigada->krajNazev; ?></h4>
                                <h4 style="color: #526d45; background-color: #87b27269; border-radius: 10px; min-width: 210px; height: 30px; margin: 4px; font-size: 20px; font-weight: 600;"><?php echo $brigada->obecNazev; ?></h4>
                            </div>
                            <a href="<?php echo base_url()?>chciBrigadu/<?= $brigada->id ?>" class="btn card-btn btn-primary" style="border-radius: 100px; margin-top: 15px;">Mám zájem</a>
                        </div>
                    </div>
                </div>

                    </div>
                    <div class="row">
            <?php } ?>
        </div>
           </div>

CSS：

@media screen and (max-width: 1199px) {
    .col-md-4 {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    .col-md-4:nth-child(2n) {
        margin-right: 0;
    }
    .rowCenter {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }
}

@media screen and (min-width: 1200px){
    .col-md-4{
        flex: 0 0 calc(33.33% - 10px);
        max-width: calc(33.33% - 10px);
        margin-right: 20px;
    }

    .col-md-4:nth-child(3n){
        margin-right: 0;
    }
      .rowCenter{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 15px;
            justify-content: center;
        }
            .rowCenter::after{
             content: "";
             flex: 0 1 30%;
       }
}
 .col-md-4:nth-child(3n) {
        margin-right: 0;
    }

我尝试从 rowCenter 类中删除 justify-content ，并且它以相同的方式对齐所有卡片，但它不在页面的中心，我需要将卡片居中。

Answer 1

如果有人有同样的问题，我已经通过添加这个来修复它。

<?php 
            $cardCounter = 0; // Initialize the card counter
            foreach($brigady as $brigada){
            $cardCounter++;
            ?>   

这是 foreach 的结尾

<?php
        if ($cardCounter % 3 == 0) {
            echo '<div class="clearfix"></div>'; 
        }
    ?>