Minha imagem está sobrepondo meu texto no h1
e meu button
, e quando diminuo a tela um pouco, todo meu texto da tag p
sobrepõe a imagem.
Eu tentei usar display: flex
para impedir que isto ocorresse, porém não deu certo. Tentei procurar algum post que me auxilia-se a corrigir este problema, porém não consegui localizar nenhum.
Eu preciso que a imagem se mantenha alinhada a direita dos meus textos da tag h1
e p
, e também do meu botão, e não os sobreponha.
Segue meu código:
.container{
width: 100%;
height: 100%;
display: flex;
flex-grow: initial;
}
.content{
font-size: 16px;
margin: 5rem 4rem 0 10rem;
}
.content h1{
width: 70%;
height: 60%;
display: flex;
font-weight: 700;
color: var(--second-color);
font-size: 3.5rem;
margin-left: 8rem;
letter-spacing: 1px;
}
.content img{
margin-left: 22%;
top: 32%;
position: absolute;
}
.content p{
width: 50%;
height: 40%;
font-weight: 300;
color: var(--second-color);
font-size: 24px;
margin-left: 8rem;
position: relative;
}
.btn{
width: 30%;
font-weight: 700;
margin-left: 8rem;
padding: 1rem;
font-size: 2rem;
background: var(--main-color);
color: white;
cursor: pointer;
border-radius: 14px;
border: none;
}
<section class="container">
<div class="content">
<h1>Create amazing graphics</h1>
<img src="team-redimensionada.jpg" alt="imagem-ilustrativa">
<p>Colaborate and create beautiful graphics with your team</p>
<button class="btn">Start Now</button>
</div>
</section>