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.