Imagem e e nome do perfil não ficam ao lado , e sim um elemento ao lado do outro.

Imagem e o nome , estão ficando um em cima do outro,e não ao lado . Na hora de colocar o background image , só funcionou quando utilizei o css in-line.

<body>

 <header class="cabecalho"> 
        <button class="cabecalho__menu" aria-label="Menu"><i></i></button>
        <p class="cabecalho__perfil" style="background-image: url(assets/img/profile_2.png); background-repeat: no-repeat; background-size: contain; background-position:center;">Bruno Lopes</p>
        <img src="assets/img/logo.svg" alt="logo Hcz" class="cabecalho__logo">
         <button class="cabecalho__notificacao" aria-label="Notificação"><i></i></button>

    Parte do css .


    .cabecalho__perfil{
    display: grid;
    color: #95999C;
    align-items: center;
    padding: 8px 32px;
    border-right: 1px solid #959595;
    justify-self: flex-end;
    grid-template-columns: repeat(3),auto;
    column-gap: 8px;

}

.cabecalho__perfil::before{
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    background-image: url();
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;


}

.cabecalho__perfil::after{
    content: '\e90d';
    color: #ffffff;
    font-size: 1.5rem;
}