Queria retirar essa borda chata que fica na minha imagem, mas não sei como.
<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 {
}