Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Bug] O paragrafo não está enquadrando

Ola! realizei todo o passo a passo da aula e tudo deu certo, exceto que o texto não está enquadrando dentro da pagina e está saindo para fora, inclusive passando pela imagem !

imagem da pagina sobre mim

vou colocar todo o html do About:

menu sobre mim

Sobre mim

meu nomajwelalskdyumdalhssdiufkldsfhisdflasdhjfksldfhasdknfjksfksanfasdjdklasjdlkasjdklasjdlkasjdlkajdlasjdklasjdasjdklasjdlkasjdlkasjdklasjdlasdioqjwedlkasnjkdfashdamsidoadklasdjansjkdkskf

meu nomajwelalskdyumdalhssdiufkldsfhisdflasdhjfksldfhasdknfjksfksanfasdjdklasjdlkasjdklasjdlkasjdlkajdlasjdklasjdasjdklasjdlkasjdlkasjdklasjdlasdioqjwedlkasnjkdfashdamsidoadklasdjansjkdkskf

    </section>
    <img src="./assets/minha foto2.jpg" alt="foto programador"
</main>
<footer class="rodape"> 
    <p>desenvolvido por Matheus Matos </p>
</footer>
e o CSS que está nas duas paginas:
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');

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

  • { margin: 0; padding: 0; }

body{ box-sizing:content-box; background-color: #8065F6; color: #EBD86C } .titulo-destaque{ color: #57D498; }

.estilo{ padding: 5% 10%; display:flex; justify-content:space-between; align-items: center;

}

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

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

.estilo__texto__fonteTexto{ font-size: 24px; font-family: 'Montserrat', sans-serif; }

.estilo__link{ display:flex; justify-content:space-between; flex-direction: column; align-items: center; gap: 32px; }

.estilo__link__botao{ /* background-color:#57D498; */ border: 2px solid #57D498; width: 370px; text-align: center; border-radius: 16px; font-size: 24px; padding: 15px 0px; text-decoration: none; color:#57D498; font-family: 'Montserrat', sans-serif; font-weight: 600; display: flex; justify-content: center; gap: 16px; } .estilo__link__botao:hover{ background-color: black; }

.estilo__subtitulo{ font-family: "Krona one", sans-serif; font-weight: 400; font-size: 24px; }

.rodape { background-color: #22D4FD; padding: 24px; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 24px; color: #000; font-weight: 400; position:absolute; bottom:0; left:0; right:0; }

.cabecalho{ padding: 2% 0% 0% 10%; font-size: 24px;

}

.cabecalho__menu{ display: flex; gap: 80px }

.cabecalho__menu_links{ font-family:"Montserrat" ; font-weight: 600; text-decoration:none; }

3 respostas

No trecho html que você postou, tag img não está fechada. Isso foi só problema na hora de copiar e colar ou está assim no código?

Bom dia! nas duas paginas o código da minha imagem está //<img src="./assets/minha foto2.jpg" alt="foto programador"// ps. coloquei o // no começo e no fim para não bugar o código.

solução!

Descobri, não tinha adicionada a tag "section" que era onde está estilizado a centralização do texto