Solucionado
Estou realizando as atividades do curso "HTML e CSS: cabeçalho, footer e variáveis CSS" e no final quis dar uma personalizada para um futuro curriculum, mas me deparei com esse problema das duas colunas estarem muito juntas, queria elas mais espaçadas. Eu montei 2 section para separar cada uma mas não consegui prosseguir. Sei que posso estar me adiantando ao curso, mas queria tentar fazer algo sozinho.
PS: Irei postar o código nos comentários.
hoje, com a Alura e o Google Gemini
<main class="apresentacao__experiencia">
<section class="apresentacao__experiencia__conteudo">
<h2 class="apresentacao__experiencia__subtitulo">Coluna 1</h2>
<p class="apresentacao__experiencia__conteudo__texto">Cras pharetra bibendum pulvinar. Nullam condimentum vel turpis eget viverra. Integer ullamcorper enim id metus ornare, vel cursus felis rhoncus. Suspendisse potenti. Ut semper, tellus quis fringilla consequat, erat orci convallis erat, sed sagittis nunc felis a ipsum. Integer imperdiet ligula sit amet enim egestas, non iaculis sapien imperdiet. Nulla at tellus et magna congue ornare. Maecenas maximus mi at leo imperdiet, eget dignissim ipsum luctus. Aenean suscipit nibh et ligula facilisis, eget lobortis nunc tincidunt. Integer sagittis tempor feugiat. Quisque tempor ultricies laoreet. Sed sit amet mattis neque, vehicula aliquet sem. Aenean et porta purus. Nulla feugiat ipsum mi, id vulputate mauris auctor eget. Aenean blandit ultricies quam.</p>
</section>
<section class="apresentacao__experiencia__conteudo">
<h2 class="apresentacao__experiencia__subtitulo">Coluna 2</h2>
<p class="apresentacao__experiencia__conteudo__texto">Donec nulla eros, porta at dui id, iaculis ultricies neque. Cras pharetra eleifend faucibus. Phasellus interdum sollicitudin ante eget commodo. Vestibulum varius bibendum dignissim. Mauris dictum maximus justo fringilla finibus. Integer id laoreet erat. Donec sodales, massa a vehicula vulputate, arcu enim pharetra ipsum, at eleifend tellus mauris at ex. Nunc condimentum libero sit amet mi aliquam feugiat. Nunc quis sapien quis eros pulvinar sagittis. Quisque tristique interdum fringilla. Phasellus non turpis nec nulla molestie porttitor.
</p>
</section>
</main>.apresentacao__experiencia{
padding: 2% 15%;
display:flex ;
align-items: center;
justify-content: space-between;
}
.apresentacao__experiencia__conteudo{
width: 100%;
display: flex;
flex-direction: column;
height: 670px;
}
.apresentacao__experiencia__subtitulo{
font-size: 24px;
font-family: var(--fonte-primaria);
}
.apresentacao__experiencia__conteudo__texto{
font-size: 24px;
font-family: var(--fonte-secundaria);
}
Bom dia Jose!
Tente colocar as duas colunas dentro de uma section e separe elas por um div ; exemplo:
<section class="apresentacao__experiencia__conteudo">
<div class="coluna">
<h2 class="apresentacao__experiencia__subtitulo">Coluna 1</h2>
<p class="apresentacao__experiencia__conteudo__texto">Cras pharetra bibendum pulvinar. Nullam condimentum vel turpis eget viverra. Integer ullamcorper enim id metus ornare, vel cursus felis rhoncus. Suspendisse potenti. Ut semper, tellus quis fringilla consequat, erat orci convallis erat, sed sagittis nunc felis a ipsum. Integer imperdiet ligula sit amet enim egestas, non iaculis sapien imperdiet. Nulla at tellus et magna congue ornare. Maecenas maximus mi at leo imperdiet, eget dignissim ipsum luctus. Aenean suscipit nibh et ligula facilisis, eget lobortis nunc tincidunt. Integer sagittis tempor feugiat. Quisque tempor ultricies laoreet. Sed sit amet mattis neque, vehicula aliquet sem. Aenean et porta purus. Nulla feugiat ipsum mi, id vulputate mauris auctor eget. Aenean blandit ultricies quam.</p>
</div>
<div class="coluna">
<h2 class="apresentacao__experiencia__subtitulo">Coluna 1</h2>
<p class="apresentacao__experiencia__conteudo__texto">Donec nulla eros, porta at dui id, iaculis ultricies neque. Cras pharetra eleifend faucibus. Phasellus interdum sollicitudin ante eget commodo. Vestibulum varius bibendum dignissim. Mauris dictum maximus justo fringilla finibus. Integer id laoreet erat. Donec sodales, massa a vehicula vulputate, arcu enim pharetra ipsum, at eleifend tellus mauris at ex. Nunc condimentum libero sit amet mi aliquam feugiat. Nunc quis sapien quis eros pulvinar sagittis. Quisque tristique interdum fringilla. Phasellus non turpis nec nulla molestie porttitor.</p>
</div>
</section><style>
.apresentacao__experiencia__conteudo {
display: flex;
flex-wrap: wrap;
}
.coluna {
padding: 2em 2em;
}
</style>Depois disso vc adiciona as outras estilizações. Me avise se funciounou, boa sorte!
Olá, Jose.
Tudo bem?
O que você pode fazer é diminuir a <section /> .apresentacaoexperienciaconteudo, você colocou um width: 100%; então as duas colunas vão sempre querer o cupar o espaço todo que é 100% da tela, tenta colocar um width: 40%; que somando as duas colunas vai dar 80% da tela , ai você pode testar 40% ou 45%, ai vai sobrar um espaço para colocar entre eles, que você pode atribuir com o gap: 2em na tag pai que é da classe .apresentacaoexperiencia, Veja:
.apresentacao__experiencia{
padding: 2% 15%;
display:flex ;
align-items: center;
justify-content: space-between;
gap: 2em;
}
.apresentacao__experiencia__conteudo{
width: 40%;
display: flex;
flex-direction: column;
height: 670px;
}Testa ai as medidas e muda de acordo com a sua tela, se não ficar legal.
Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.
Realmente gente eu coloquei a carroça na frente dos bois, mais adiante no proprio curso foi mostrado como resolver meu problema. Agradeço a todos pela ajuda !!