[Dúvida] Ajuda com alinhamento de links e remoção de sublinha

Olá, Rafael! Tudo bem?

Para alinhar seus links verticalmente à esquerda e remover os sublinhados, você pode fazer as seguintes alterações no seu CSS:

1. Alinhar os links à esquerda: Para garantir que os links fiquem alinhados à esquerda, você pode adicionar align-items: flex-start; na classe .apresentacao__subtitulo__links.

2. Remover sublinhas dos links: Para remover as sublinhas, adicione a propriedade text-decoration: none; ao estilo dos links. Você pode aplicar isso a todos os links no seu site usando a tag a no CSS.

O código CSS atualizado ficou assim:

.apresentacao__subtitulo__links {
    display: flex;
    flex-direction: column;
    font-size: 25px;
    font-family: "WDXL Lubrifont TC", sans-serif;
    align-items: flex-start;
}

a {
    text-decoration: none; /* Remove sublinhas dos links */
    color: inherit; /* Mantém a cor do texto */
}

E o CSS completo com as mudanças:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Orbitron:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=WDXL+Lubrifont+TC&display=swap');

*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh; /*Importante colocar a propriedade "height: 100vh" para aplicar a ocupação de toda a tela pelas configurações do CSS*/
    box-sizing: border-box; /*A propriedade e valor “box-sizing: border-box” se faz fundamental para garantir que nada ou nenhum elemento, saia das dimensões do elemento pai*/ 
    background-color: #000000;
    color: #F6F6F6;
}

.cabecalho {
    display: flex;
    justify-content: center;
    font-family: "Orbitron", sans-serif;
    font-size: 50px;
}

.apresentacao{
    margin: 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__titulo {
    margin: 2% 0% 1% 0%;
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}

.apresentacao__titulo__conteudo {
    margin: 2% 0% 1% 0%;
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

.apresentacao__subtitulo {
    margin: 2% 0% 1% 0%;
    font-size: 32px;
    font-family: "Krona One", sans-serif;
}

.apresentacao__subtitulo__links {
    display: flex;
    flex-direction: column;
    font-size: 25px;
    font-family: "WDXL Lubrifont TC", sans-serif;
    align-items: flex-start;
}

a {
    text-decoration: none; /* Remove sublinhas dos links */
    color: inherit; /* Mantém a cor do texto */
}

.contatos {
    font-family: "Open Sans", sans-serif;
    font-size: 25px;
}

.rodape {
    display: flex;
    justify-content: space-around;
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
}

Com essas alterações, seus links ficarão alinhados à esquerda e sem sublinhados. O resultado é esse:

Espero ter ajudado. Abraços e bons estudos!

Olá agradeço muito pela resposta me ajudou bastante. Quanto ao item "2." citado apliquei e ficou ótimo, mas quanto ao item 1, acredito que eu não me fiz entender bem, o que gostaria é de uma ajuda para pegar os links: "Tutorial HTML e CSS, Site católico e CTB e colocá-los alinhado a esquerda entre eles, porém os três ao centro, ou seja como está na foto envida mas bem ao centro, o align-item: center, não deu certo por apresar dos 3 ficar ao centro, não ficam alinhado a esquerda verticalmente um com o outro. Se puderem me ajudar mais uma vez, agradeço.

Oi, Rafael! Como vai?

Agora entendi melhor o que deseja fazer. Para centralizar o bloco de links na tela e manter os textos dos links alinhados à esquerda entre si, uma boa prática é criar uma div extra, que vamos chamar nesse caso de .links-container. Essa div funciona como um contêiner externo responsável exclusivamente pela centralização do bloco, usando display: flex com justify-content: center.

Já a div .apresentacao__subtitulo__links mantém o comportamento em coluna (flex-direction: column) e alinha os textos com text-align: left. Isso separa responsabilidades: uma estrutura controla o posicionamento externo, e a outra, a formatação interna.

Veja como ficou:

HTML:

<div class="links-container">
    <div class="apresentacao__subtitulo__links">
        <a href="#" target="_blank">Tutorial HTML e CSS</a>
        <a href="#" target="_blank">Site católico</a>
        <a href="#" target="_blank">CTB</a>
    </div>
</div>

CSS:

.links-container {
    display: flex;
    justify-content: center; /* Centraliza o bloco na horizontal */
}

.apresentacao__subtitulo__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 25px;
    font-family: "WDXL Lubrifont TC", sans-serif;
}

a {
    text-align: left;
    text-decoration: none;
    color: inherit;
}

Resultado final:

Com essa estrutura, seu código fica mais organizado, sem "gambiarras", e mais fácil de dar manutenção no futuro.

Espero ter ajudado e fico à disposição. Abraços e bons estudos!

Só passando para agradecer fortemente a Alura Scuba Rafaela Silvério, pois de fato me ajudou com a solução de um problema em meu projeto, além da atenção rápida e contínua. Graças a instrução pude entender que, segue no comentário da propriedade "gap":

.apresentacao__subtitulo__links { display: flex; flex-direction: column; gap: 10px; /em teste, aqui poderia ser usado a propriedade "row-gap" também./ font-size: 25px; font-family: "WDXL Lubrifont TC", sans-serif; }