Olá, pessoal, queria ajuda num projeto mobile first, onde eu estou tendo problemas com meu hr no css. O comportamento não é o esperado, pois ele fica no meio ao invés de encostar na section por inteiro. Alguém consegue me ajudar?
<section class="consultas-dia">
<div class="consultas-dia__paciente">
<img src="./images/perfil-1.svg" alt="Paciente Luciana Dias" class="consultas-dia__perfil-paciente">
<div class="consultas-dia__infos-pacientes">
<p class="consultas-dia__nome-pacientes">Luciana Dias</p>
<div class="consulta-dia__consulta">
<img src="./images/Camera.svg" alt="Câmera" class="consulta-dia__camera">
<p class="consultas-dia__infos-consulta">Consulta remota</p>
</div>
</div>
<div class="consulta-dia__chat">
<a href="#"><img src="./images/Chatcirculo1.svg" alt="chat para conversar com paciente"></a>
</div>
</div>
<hr class="linha-horizontal">
<p class="consultas-dia__horario">14:00 - 15:00 (1 hora)</p>
<div class="consultas-dia__opcoes">
<a href="#" class="consultas-dia__ligar-video">Ligar por vídeo</a>
<a href="#" class="consultas-dia__ligar-audio">Ligar por áudio</a>
</div>
</section>
.consultas-dia {
margin: 0 1em 1em 1em;
border: 1px solid var(--branco);
border-radius: 8px;
background-color: var(--branco);
padding: 1.5em;
}
.consultas-dia__paciente {
display: flex;
align-items: center;
}
.consultas-dia__perfil-paciente {
border-radius: 50%;
width: 32px;
height: 32px;
}
.consultas-dia__infos-pacientes {
display: flex;
flex-direction: column;
margin-left: 1em;
width: 80%;
}
.consultas-dia__nome-pacientes {
font-weight: 700;
font-size: 14px;
color: var(--preto-titulo);
padding-top: 1em;
}
.consulta-dia__consulta {
display: flex;
gap: 0.5em;
}
.consulta-dia__camera {
width: 16px;
}
.consultas-dia__infos-consulta {
font-size: 12px;
color: var(--cinza-subtitulo);
}
.consulta-dia__chat-img {
width: 32px;
}
.linha-horizontal {
border: none;
border-top: 1.5px solid var(--preto-titulo);
margin: 1em 0;
opacity: 10%;
}
.consultas-dia__horario {
font-weight: 500;
font-size: 12px;
color: var(--preto-titulo);
padding-bottom: 0.8em;
padding-left: 1em;
}
.consultas-dia__opcoes {
display: flex;
justify-content: center;
gap: 1em;
}
.consultas-dia__ligar-video {
border: 1px solid var(--laranja);
border-radius: 8px;
background-color: var(--laranja);
text-align: center;
text-decoration: none;
color: var(--branco);
font-weight: 500;
font-size: 14px;
padding: 0.85em 1em;
}
.consultas-dia__ligar-audio {
border: 1px solid var(--cinza-gelo);
border-radius: 8px;
background-color: var(--branco);
text-align: center;
text-decoration: none;
color: var(--preto-titulo);
font-weight: 500;
font-size: 14px;
padding: 0.85em 1em;
}