Tailwind中SVG无法在Div内右对齐的问题求助

使用Tailwind CSS开发时，遇到SVG图标无法在Div容器内右对齐的问题：尝试过多种属性变体，要么SVG无法正常显示，要么图标始终停留在Div的起始位置。原背景为黑色，为了方便观察容器范围，临时将Div背景设为黄色。

相关代码如下：

<div class="bg-black w-full py-4 px-4 grid grid-cols-2 gap-2 mb-0">
    <div class=" w-1/2 grid grid-cols-4 gap-2">
        <div class="my-auto col-span-1"><img src="{{$img}}" style="{{addShadow()}}"></div>
        <div class="col-span-3 font-bold uppercase text-3xl text-stone-200 my-auto" style="font-family: 'Audiowide', cursive;">{{$siteName}}</div>
    </div>
    <div class="my-auto pr-4 text-white bg-yellow-200 items-right">
        <a href="/#" class="text-white" onclick="openNav()" >
        <img src="{{asset('svg/circleHamburger.svg')}}" class="text-white max-w-[30px] max-h-[30px]"></a>
    </div>
</div>

已尝试过flex布局及其变体属性、justify-end，但均无效果。当前Div的显示效果如下：

内容的提问来源于stack exchange，提问作者Jim