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

Borda na Imagem

Queria retirar essa borda chata que fica na minha imagem, mas não sei como.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

<header class="cabecalho">
        <a href=""><p>Pagina Inicial</p></a>
        <h1>Conheça mais nossos Herois</h1>
        <a href=""><p>Redes Sociais</p></a>
    </header>

    <main>
        <section class="conteudo_nome">
            <div class="nome">
                <h2>Leitinho</h1>
            </div>
        </section>
        <section class="conteudo_lista">
            <div class="conteudo_lista_lista">
                <ul>
                    <p class="titulo_lista">Habilidades? Chamamos de Dom</p>
                    <li>Lorem Ipsum is simply dummy text of the printing and typesetti.</li>
                    <li>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</li>
                    <li>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</li>
                    <p class="titulo_lista">Nosso Curriculo? Por acaso você é da Policia?</p>
                    <li>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</li>
                    <li>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</li>
                    <li>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</li>
                </ul>  
            </div>
            <div class="conteudo_biografia">
                <div class="titulo_biografia">
                    <h3>Ponto Cego</h3>
                </div>
                <div class="foto_biografia">
                    <img src="Ponto_Cego.webp" alt="" height="350px"> 
                </div>
                <div  class="titulo_biografia">
                    <h3>Informações Biológicas</h3>
                </div>
                <div class="conteudo_da_biografia">
                    <h4>Estado Atual</h4>
                    <p>Sumido</p>
                </div>
                <div class="conteudo_da_biografia">
                    <h4>Espécie</h4>
                    <p>Super</p>
                </div>
                <div class="conteudo_da_biografia">
                    <h4>Ocupações</h4>
                    <p>Super-herói</p>
                </div>
                <div class="conteudo_da_biografia">
                    <h4>Afiliações</h4>
                    <p>Vought International</p>
                </div>
                <div class="conteudo_da_biografia">
                    <h4>Alter ego</h4>
                    <p>Ponto Cego</p>
                </div>

CSS

* {
    margin: 0;
    padding: 0;
}

main {
    background-color: rgb(54, 52, 40);
}

.cabecalho {
    text-align: center;
    background-color: rgb(31, 24, 24);
    height: 70px;
    color: #fadc31;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.cabecalho a:link {
    text-decoration: none;
}

.cabecalho p {
    color: #fadc31;
}

h2 {
    color: #fadc31;
    text-decoration: underline;
}

.conteudo_nome {
    text-align: center;
    padding-top: 80px;
    font-size: 40px;
     
}

.conteudo_lista {
    display: flex;
    margin-top: 75px;
    margin-left: 90px;
    justify-content: space-evenly;
}

.conteudo_lista_lista { 
    width: 40%; 
    word-break: break-all;
}

li {
    list-style-type: none;
    margin: 20px;
    color: #DEDCCB;
}

.titulo_lista {
    margin-bottom: 30px;
    font-weight: bold;
    font-size: 20px;      
    margin-left: 20px;
    color: #fadc31;
}

.video_conteudo {
    margin-left: 30px;
}

.conteudo_biografia {
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 2px solid black;

}

.titulo_biografia {
    color: white;
    background-color: black;
    padding: 10px;
    font-weight: bold;
}

.conteudo_da_biografia {
    border: 1px solid black;
    flex-direction: row;
    display: flex;
    flex-direction: row;
}

.conteudo_da_biografia p, h4 {
    margin: 10px;
    
}

.foto_biografia {
    
}
2 respostas

Olá!

Voce pode comentar na classe conteudo_biografia, o border solid:

.conteudo_biografia {
    display: flex;
    flex-direction: column;
    text-align: center;
/*     border: 2px solid black; */

}

Fica assim:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
solução!

Perdão, amigo, não era a borda.Eu apenas me esqueci de colocar display flex na foto, ai ele ficou com esse espaço.