یک سوال Css

درود دوستان عزیز
به ی مشکل ساده تو Css برخوردم 😅
به befor عرض 100 درصد دادم که تمام فضای باقی مونده رو بگیره که اگر ایکون ها کمتر های بیشتر بود حالت فعلیش رو حفظ کنه ولی باعث میشه که عرض اون باکس های آیکون ها حذف شه و این ساختار رو بهم میریزه همون طور که تو تصویر پایین هست...
دیزاین:

کدم:

                <!-- Links -->
                <div class="flex gap-x-2 mt-[54px] before:content[''] before:w-full before:h-px before:bg-zinc-700">   
                    <!-- Github -->
                    <div class="flex-center w-8 h-8 bg-black/20 rounded">
                        <svg class="w-6 h-6 text-zinc-700">
                            <use href="#github"></use>
                        </svg>
                    </div>
                    <!-- Telegram -->
                    <div class="flex-center w-8 h-8 bg-black/20 rounded">
                        <svg class="w-6 h-6 text-zinc-700">
                            <use href="#telegram"></use>
                        </svg>
                    </div>
                    <!-- Instagram -->
                    <div class="flex-center w-8 h-8 bg-black/20 rounded">
                        <svg class="w-6 h-6 text-zinc-700">
                            <use href="#instagram"></use>
                        </svg>
                    </div>
                    <!-- Whats app -->
                    <div class="flex-center w-8 h-8 bg-black/20 rounded">
                        <svg class="w-6 h-6 text-zinc-700">
                            <use href="#whatsapp"></use>
                        </svg>
                    </div>
                </div>

خروجی:

@saghari @Raymond @salar.mohammad2013 @ossvahid