[Dúvida] Tamanho dos elementos na tela

**index html **

<main class="apresentacao">
    <section class="apresentacao__conteudo">
        <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong
                class="titulo-destaque">com um Front-End de qualidade!</strong></h1>
        <p class="apresentacao__conteudo__texto">Olá! Sou Marcelo Campêlo, desenvolvedor Front-End Júnior com
            especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas
            ideias. Vamos conversar?</p>
        <div class="apresentacao__links">
            <h2 class="apresentacao__links_subtitulo">Acesse minhas redes:</h2>
            <a class="apresentacao__links__links" href="https://www.linkedin.com/in/marcelo-campelo-27a85192/">

                <img src="assets/linkedin.png" alt="icone do Linkedin">
                Linkedin
            </a>
            <a class="apresentacao__links__links" href="https://github.com/DevMarceloCampelo">
                <img src="assets/github.png" alt="icone do GitHub">
                GitHub
            </a>
        </div>
    </section>
    <img src="assets/Imagem.png" alt="Imagem de uma pessoa com computador na frente">
</main>
<footer class="rodape">
    <p>Desenvolvido por Marcelo Campêlo.</p>
</footer>

style css

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root { --cor-primaria: black; --cor-secundaria: #F6F6F6; --cor-terciaria: #22D4FD; --cor-hover: #272727;

--fonte-primaria: 'Krona One', sans-serif;
--fonte-secundaria: 'Montserrat', sans-serif; 

}

*{ margin: 0; padding: 0; }

body{ box-sizing: border-box; background-color: var(--cor-primaria); color: var(--cor-secundaria); } .cabecalho{ padding: 2% 0% 0% 15%; } .cabecalho__menu{ display: flex; gap: 80px;

}

.cabecalho__menu_link{ font-family: var(--fonte-secundaria); font-size: 24px; font-weight: 600; color: var(--cor-terciaria); text-decoration: none;

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

.apresentacao__conteudo{ width: 615px; display: flex; flex-direction: column; gap: 40px; }

.apresentacao__conteudo__titulo{ font-size: 36px; font-family: var(--fonte-primaria);

}

.titulo-destaque { color: var(--cor-terciaria) }

.apresentacao__conteudo__texto{ font-size: 24px; font-family: var(--fonte-secundaria); } .apresentacao__links { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 32px; }

.apresentacao__links_subtitulo{ font-family: var(--fonte-primaria); font-weight: 400; font-size: 24px; }

.apresentacao__links__links{ display: flex; justify-content: center; gap: 16px; border: 2px solid var(--cor-terciaria); width: 378px; text-align: center; font-size: 24px; border-radius: 8px; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: var(--cor-secundaria); font-family: var(--fonte-secundaria);

}

.apresentacao__links__links:hover{ background-color: var(--cor-hover); }

.rodape{ color:var(--cor-primaria); background-color: var(--cor-terciaria); padding: 24px; text-align: center; font-family: var(--fonte-secundaria); font-size: 24px; font-weight: 400px;

}

Olá Marcelo, tudo ok contigo?

No seu código HTML, você tem uma seção <section class="apresentacao__conteudo"> e uma imagem <img src="assets/Imagem.png" alt="Imagem de uma pessoa com computador na frente"> dentro do elemento <main class="apresentacao">. Se esses elementos estiverem muito próximos, você pode adicionar margem (margin) ou preenchimento (padding) a eles por meio do CSS.

Por exemplo, você poderia adicionar uma margem à direita da seção e à esquerda da imagem, assim:

.apresentacao__conteudo {
    margin-right: 2rem;
}

img {
    margin-left: 2rem;
}

Ou adicionar preenchimento:

.apresentacao__conteudo {
    padding-right: 2rem;
}

img {
    padding-left: 2rem;
}

Os valores acima são apenas exemplos, você pode ajustá-los de acordo com o que achar melhor para o seu layout.

Outra opção seria você diminuir o tamanho da imagem, ou colocar ela de um tamanho que ela se adapte ao tamanho da tela baseado nas margens e padding´s, para tal você pode colocar uma margem na seção de escrita e na imagem, algo assim:

.apresentacao__conteudo {
    margin-right: 2rem;
}

img {
    margin: auto 1rem;
    width: auto;
    height: auto;
}

Assim a imagem iria ter um tamanho que se ajustaria ao tamanho da tela sempre obedecendo as margens.

Outro ponto importante é garantir que o contêiner pai desses elementos (neste caso, o <main class="apresentacao">) esteja configurado para exibir seus elementos filhos de maneira adequada. Se os elementos filhos estiverem se sobrepondo ou não estiverem alinhados corretamente, pode ser necessário ajustar as propriedades de exibição (display), direção do fluxo de itens (flex-direction), justificação do conteúdo (justify-content), alinhamento dos itens (align-items), entre outras.

Por exemplo, se você quiser que os elementos filhos sejam exibidos em linha e centralizados, você pode usar:

.apresentacao {
    display: flex;
    justify-content: center;
    align-items: center;
}

Lembre-se, essas são apenas sugestões baseadas no seu problema. Recomendo que você experimente essas soluções e ajuste os valores conforme necessário para obter o layout desejado.

Era isso! Espero ter ajudado!

Abraços e bons estudos!