Olá, Paulo!

Acredito que esses retângulos estão aparecendo por você estar usando a tag BUTTON, poderia me confirmar?

E em relação aos botões ficarem abaixo do texto, você pode inserir um 'display: flex;', 'flex-direction: column;' na DIV que está agrupando os botões e textos.

Se teve dúvidas em relação a explicação, não deixe de entrar em contato!

Fala ai Pablo, tudo bem?

Acredito que o seu código esteja maisomenos assim:

<div> <!-- Essa div possui o display flex. Chamaremos ela de div pai -->
    <p> Olá!! Sou Paulo .... Vamos conversar?</p>
    <div> 
        <button> Instagram </button>
        <button> LinkedIn </button>
        <button> GitHub </button>
    </div>
</div>

O display flex por padrão tende a alinhar os elementos um ao lado do outro, logo, a <div > com os botões ficaria ao lado da tag <p >.

Existem diversas formas de resolvermos esse problema. A primeira delas é tirando o display: flex; da <div > pai. Por padrão os elementos <p > e <div > são elementos a nível bloco, ou seja, possuem o display: block;. De acordo com a documentação da W3C, o display:block SEMPRE começa em uma nova linha e ocupa toda largura dispónivel. Naturalmente era para esses elementos ficarem um abaixo do outro, mas isso muda pelo comportamento flex da <div > pai.

Caso seja queira resolver o problema sem remover o display: flex; do elemento pai, podemos utilizar o atributo CSS: flex-direction. Por padrão, o valor desse atributo é flex-direction: row, resumindo, ele alinha como se fosse uma linha de uma tabela (um ao lado do outro). Podemos alterar esse valor para flex-direction: column para alinharmos como se fosse uma coluna de uma tabela (um embaixo do outro).

É claro que isso é uma abordagem bem mais resumida e simplificada do funcionamento da flexbox. Mas caso queira entender melhor, dê uma olhada no artigo da Juliana aqui na alura. Espero que tenha conseguido te ajudar, qualquer dúvida é só responder aqui no Fórum.

Esse é o HTML

Eleve seu Negocio digital a outro nivel com um Front-end de qualidade!

    </section>
    <img src="dev.pv.png" alt="Ilustração grafica programação">
</main>

Esse é o CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap')

• { margin: :0; padding: 0; }

body { height: 100vh; box-sizing: border-box; background-color: #c2c2c2; color: #030303; }

.titulo-destaque { color: #035003; }

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

.apresentacao__conteudo { width: 615px; height: ; }

.apresentacao__conteudo__titulo { font-size: 36px; font-family: "Krona One", sans-serif; }

.apresentacao__conteudo__texto{ font-size: 25px; font-family: "Montserrat", sans-serif; }

.apresentacao__links{ display: flex; justify-content: space-around; flex-direction: column; }

.apresentacao__links__link { display: flex; flex-direction: column; background-color: #001068; width: 180px; text-align: center; border-radius: 17px; font-size: 24px; font-weight: 600; padding: 14px 0; text-decoration: none; color: #f8f3f3; font-family: 'Montserrat', sans-serif; }

Companheiros obrigado viu? Ei! Com a ajuda de vocês também eu fiz algumas modificações pelo meu entendimento raso e com a ajuda de vocês eu mexi na class do lumpalumpa ali oh...

Poxa, ficou massa, esse pluguin do VS code o live é massa que vc vai salvando e vai visualizando...

Eu tirei o

Ficou na parte de baixo graças a Deus. Preciso de uma luz em relação a uma situação, como eu coloco um retangulo do lado do outro? Olha como ficou:

Com retângulo você quer dizer os botões, certo?

Você consegue mandar o código novo para darmos uma olhada? Inclusive, envie ele entre três crases ```seu código ```. Por que ai sai formatado e conseguimos visualizar melhor. Ele sai formatado igual o exemplo abaixo:

console.log("Olá Paulo");