Margin não funciona

Parece que você está usando a propriedade margin na classe .conteudo-principal para aplicar uma margem de 10%, mas a margem está sendo aplicada ao próprio elemento com a classe .conteudo-principal em vez de seus elementos filhos. Isso pode acontecer se os elementos filhos tiverem uma propriedade width definida, limitando o espaço disponível para a margem.

Você pode tentar adicionar a propriedade box-sizing: border-box; à classe .conteudo-principal para garantir que a largura e altura incluam as bordas e os preenchimentos, e não apenas o conteúdo. Isso pode ajudar a garantir que a margem seja aplicada dentro do elemento, e não fora dele.

Aqui está um exemplo de como você pode ajustar o código:

.conteudo-principal {
    margin: 10%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Adicione esta linha */
}

Certifique-se também de que não há outras regras CSS que estejam anulando a margem ou afetando o layout de maneira que você não espera. Se ainda assim o problema persistir, pode ser útil revisar o restante do código CSS e HTML para identificar qualquer conflito que esteja afetando o layout.

Tentei o que foi sugerido mas não resolveu. O problema continua o mesmo, quando ponho a propriedade, ela se aplica ao elemento pai, e não aos filhos. Outro exemplo disso é o box sizing, quando coloco ele dentro das configurações da tag body, ele não é aplicado aos elementos filhos. Faz tempo que tento resolver isso mas não consigo, vou deixar meu código CSS completo, pode ser que você identifique qual é o problema:

Obs: como não estava conseguindo colocar o " box-sizing: border-box;" dentro do body de maneira efetiva, fiz da seguinte forma:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    background-color: #000000;
    color: #f6f6f6; 
}

.conteudo-principal {
    margin: 20px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.texto-e-botoes {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.destaque-titulo{
    color: #22d4fd;
}

h1 {
    width: 593px;
    height: 168px;
    font-family: 'Krona One';
    font-size: 36px;
    font-weight: lighter;
    line-height: 56px;
}

p {
    width: 593px;
    height: 144px;
    text-align: justify;
    font-family: 'Montserrat';
    font-size: 24px;
    line-height: 36px;
}

a {
    background-color: #22d4fd;
    background-image: url("fundo-botao.png");
    font-family: 'Montserrat';
    font-weight: 'SemiBold';
    color: black;
    text-decoration: none;
}