Olá Igor!

Pelo que entendi, você está tendo problemas com a repetição de uma imagem de fundo mesmo utilizando a propriedade no-repeat. Vou te ajudar a resolver esse problema.

No trecho de código que você compartilhou, é possível ver que a classe .principal está definindo a imagem de fundo com a propriedade background-image. Para evitar a repetição da imagem, você adicionou a propriedade background-repeat: no-repeat;, o que está correto.

No entanto, é importante lembrar que a propriedade background-repeat é aplicada ao eixo X e Y. Isso significa que, por padrão, a imagem de fundo será repetida tanto na horizontal como na vertical. Para evitar a repetição em ambos os eixos, você pode utilizar a propriedade background-repeat com dois valores separados por espaço, um para o eixo X e outro para o eixo Y.

No seu caso, como você não quer que a imagem se repita em nenhum dos eixos, você pode definir a propriedade background-repeat como no-repeat no-repeat. Dessa forma, a imagem não será repetida nem na horizontal, nem na vertical.

Aqui está um exemplo de como ficaria a classe .principal com a propriedade background-repeat corrigida:

.principal {
  background-image: url("img/Background.png");
  background-repeat: no-repeat no-repeat;
}

Com essa alteração, a imagem de fundo não será mais repetida e ocupará apenas uma vez o espaço definido pelo elemento section com a classe .principal.

Espero ter ajudado! Bons estudos!