Como fazer uma div ocupar somente o tamanho do icone dentro dela?

Estou criando uma aplicação e to na parte do header. Pra isso coloquei o icone de um sino pras notificações e do lado eu queria colocar outro icone de login ao lado. Eu botei o icone de sino em uma div e o icone de login em outra div. Mas essas duas divs então dentro de uma div-pai. Não consigo posicionar eles lado a lado como quero por conta das margens que cada um tem. Como posso ignorar a margem deles pra posicionar do jeito certo? Segue o código:

index -

 const Header = () =>{

    return(
        <div className='caixa'>

                <div className='sino'>
                    <BsBell />
                </div> 

                <div className='log'>
                    <IoIosLogIn />
                </div>

        </div>  
    )
}

css -

.caixa {
    height: 100px;
    background-color: #4054b4;
} 

.sino {
    display: relative;
    font-size: 25px;
    float: right;
    margin: 35px 190px;
    color: white;
    cursor: pointer;
}

.log{
    display: absolute;
    font-size: 25px;
    float: right;
    padding-left: 10px;
    color: white;
    cursor: pointer;
}