Erro tamanho da barra

Realizei a mesma configuração da aula, mas a barra ficou estática em 103%.

Segue código:

Cartão Faturamento Meta = 
VAR faturamento = [FaturamentoFormatado]
VAR meta = FORMAT([MetaFaturamento % medida], "#%")
RETURN

"
<div class='card-container'>
    <div class='card-content'>
        <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons:FILL'>
        <div class='title'>
            <p class='title-text'>
               Faturamento Total (R$) <!-- Título -->
            </p>
        

        <div class='range'> <!-- Área da barra azul inferior -->
        <div class='fill' style='width: "&meta&" '><!-- Barra azul -->
            "&meta&" <!-- Valor da meta -->
        </div>
        </div>
        </div>
        <div class='data'>
        <p>"&faturamento&"</p> <!-- Valor do faturamento -->
        </div>
    </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2family=Inter:wght@400;500;700&display=swap');

/* Alinha todos items ao centro */

.card-container {
    display: flex;
    align-items: left;
    justify-content: left;
    height: 100%;
}

.card-content {
    font-family: 'Inter', sans-serif; /* Font do component, remova para usar a font nativa do PBI */
    margin: 0; /* Remove todas as margens do card */
    padding: 1.2rem; /* Preenchimento envolta do card */
    background-color: #fff; /* Cor de fundo do card */
    border: 2px solid rgba(136, 136, 136, 0.1);/* borda do card */
    box-shadow: 1px 1px 2px 1px rgba(133, 133, 133, 0.1);
    max-width: 280px; /* largura máxima do card */
    max-height: 140px; /* alura máxima do card */
    width: 100%; /* Adaptação a larguras menores que 250px definida acima */
    border-radius: 11px; /* Raio da borda do card */
    
}

/* Estiliza o título e o growth */

.title {
    display: flex;
    flex-direction: column;
}


/* Estiliza o título */

.title-text {
    margin: -0.5rem;  /*remove uma margem superior */
    margin-left: 0.09rem;
    font-size: 1rem; /* Tamanho da font */
    color: #374151; /* Cor do título */
    font-weight: 600; /* peso da font da % */
    margin-bottom: 0rem;
}

/* Valor de % do card */


/* estiliza o valor em moeda */

.data  {
    margin: -2.3rem  ;  /* aplica margin superior e inferior */
    color: #1F2937; /* cor do texto */
    font-size: 3rem; /* tamanho da font */
    font-weight: 700; /* peso da font do valor em moeda */
    text-align: center; /* alinha o texto ao lado direito */
}

/* estiliza a barra de fundo */

.range {
    position: relative;
    background-color: #E5E7EB; /* cor da barra de fundo */
    width: 100%; /* largura da barra */
    height: 0.8rem; /* altura da barra */
    border-radius: 0.25rem;
}

.range .fill {
    background-color: #19325C; /* Cor da barra de 'meta' */
    height: 0.8rem; /* altura da barra */
    border-radius: 3px; /* raio da borda */
    font-size: .5rem; /* tamanho da font da porcentagem */
    text-align: right; /* alinha o texto ao centro */
    color: white; /* cor do texto */
}
</style>
"