Tive problemas com o posicionamento da minha barra de pesquisas, ela estava posicionada para a esquerda.
Uma solução que eu adotei foi remover as posições left e top na classe .buscar-pensamentos
do arquivo listar-pensamento.component.css
:
Descrição -
.buscar-pensamentos {
background: #F8F9FE;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
border-radius: 10px;
height: 44px;
left: 421px;
top: 490px;
width: 510px;
display: flex;
align-items: center;
text-align: center;
align-self: center;
}
Minha modificação -
.buscar-pensamentos {
background: #F8F9FE;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
border-radius: 10px;
position: static;
height: 44px;
width: 510px;
display: flex;
align-items: center;
text-align: center;
align-self: center;
}
E no arquivo style.css
onde tratam de formatações css globais eu modifiquei a classe .container
:
Modelo do curso -
.container {
padding-right: 1rem;
padding-left: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
margin-right: auto;
margin-left: auto;
}
Minha modificação -
.container {
padding-right: 1rem;
padding-left: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
margin-right: auto;
margin-left: auto;
=> display: flex;
justify-content: center;
flex-direction: column; <=
}
Espero que ajude vocês.