To prevent overlapping of elements in bootstrap fixed header with flexbox

I’ve created a fixed header with custom properties using bootstrap.

It contains 2 image elements one is asset\fetching.gif and another is asset\logout.png and when I execute it, the asset\fetching.gif is overlapping the asset\logout.png.

Did I make any mistakes?

<div class="fixed-top header shadow-sm d-flex align-items-center justify-content-between p-3" style="margin-right:10px;margin-left:10px;">
        <div class="d-flex align-items-center">
            <h1 class="text-2xl pt-2 d-none d-sm-block">Smart Problem-solving using AI-driven Resource Kit</h1>
            <h1 class="text-2xl pt-2 d-sm-none">S.P.A.R.K</h1> 
        </div>
        <img id="fetchingGif" src="asset/fetching.gif" alt="Fetching" class="w-auto h-12 max-h-12 mx-2">
        <button id="logoutBtn" class="btn" style="background-color:transparent;padding:0;border:none;">
            <img src="asset/logout.png" style="width:40px;height:40px;" alt="Logout">
        </button>
    </div>

What I’ve attempted :

I checked the HTML code where the fetching GIF and logout button are in a flex container.
I added a Bootstrap class (mx-2) to the fetching GIF to make space, but it still covered the logout button.

Everything that I’ve tried didn’t work.

You need to sign in to view this answers