calcolo barre percentuale influisce su attributo width

[Indi22]

Buongiorno! Sto facendo del mio meglio per creare un questionario responsive che, grazie a domande con risposte pesate, possa fornire la rappresentazione grafica del servizio più utile, proprio tramite barre di percentuale decrescenti.
La logica che utilizzo per il calcolo è questa:

// Inizializza i punteggi dei servizi
            $punteggi_servizi = array(
                'servizio1' => 0,
                'servizio2' => 0, 
                //etc etc con i vari servizi
            );

                        // Calcola i punteggi per ciascun servizio basato sulle risposte
            foreach ($punteggi_servizi as $servizio => &$punteggio) {
                foreach ($punteggi as $domanda => $risposte) {
                    if (isset($pesi[$servizio][$domanda])) {
                        foreach ($risposte as $risposta) {
                            if (isset($pesi[$servizio][$domanda][$risposta])) {
                                $punteggio += $pesi[$servizio][$domanda][$risposta];
                            }
                        }
                    }
                }
            }
            unset($punteggio); 

            // Ordina i servizi per punteggio decrescente
            arsort($punteggi_servizi);

            echo '<center><h2>I servizi più adatti a te:</h2></center>';
            echo '<table style="border-width: 0px 0 0 0px;">'; 
            echo '<tr>'; 

            $counter = 0; 

            foreach ($punteggi_servizi as $servizio => $punteggio) {
                // Calcolo della percentuale basata sul punteggio massimo
                $percentuale = ($punteggi_servizi['servizio1'] > 0) ? ($punteggio / $punteggi_servizi['servizio1']) *100 : 0;

                echo '<td style="display: grid;">'; 
                echo '<li style="display: flex;">';
                echo '<div class="progress-bar">';
                echo '<div class="progress" style="width: ' . $percentuale . '%;">';
                echo '<span class="service-name">' . $servizio . '</span>';
                echo '</div>';

echo'</div>';[ /PHP ]

il css delle barre è: 
[ PHP ].progress-bar-container {display: flex;
align-items: center;
}

.progress-bar {
background-color: #e0e0e0;
border-radius: 13px;
padding: 3px 10px; 
margin: 10px 0;
flex: 1;
position: relative; 
}

.progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #76c7c0;
    height: 55px;
    border-radius: 10px;
    position: relative;
    //max-width: 100%; 
    //width: <?php echo min($percentuale, 100); ?>%; 
}

come però poi si può notare da inspector, una volta calcolati i risultati pesati in base alle risposte date esce così:

<div class="progress-bar">
<div class="progress" style="width: 487.5%;"><span class="service-name">servizio1</span>
</div>
</div>

per cui, varie barre di percentuale escono inevitabilmente dallo schermo. Hoi provato con max-width, ho provato a reimpostare la percentuale nel calcolo, vari tipi di limitazioni e di modifica del css ma non ne vengo a capo.
Magari sarà semplice, ma mi sto scervellando e non ci riesco. Qualcuno ha dunque un'idea che mi possa aiutare? Grazie in anticipo e un'ottima giornata!