Flexbox Tailwind CSS内联块不起作用

我正在使用Tailwind CSS并尝试创建一个导航栏，该导航栏将所有社交设备链接显示为所有设备尺寸的内联块，并在移动设备上的每个项目周围进行调整，但最终却变成了块项目。我将flex应用于链接容器，添加了justify-around，然后将内联块添加到ul，但是它无法识别内联块。这是由于我使用的flex对象的嵌套结构吗？

这是一个视觉示例：

内联块预期

在手机上的预期结果

这是我指的代码：

{{!-- Container - Social Pages --}}
<div class="flex flex-row md:items-center justify-around border-solid border-4 border-purple-600">
    <ul class="inline-block border-solid border-4 border-teal-600">
        {{#if @site.facebook}}
        <li class="px-2"><a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> icons/facebook}}</a></li>
        {{/if}}
        {{#if @site.twitter}}
        <li class="px-2"><a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> icons/twitter}}</a></li>
        {{/if}}
        <li class="px-2"><a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a></li>
    </ul>
</div>

这是完整的代码：

{{!-- Navigation Container - Logo, Links, Mobile Menu --}}
<nav class="lg:flex lg:flex-wrap lg:items-center lg:justify-between border-solid border-4 border-blue-600">
    {{!-- Container - Logo and Mobile Menu --}}
    <div class="flex justify-between border-solid border-2 border-red-500">
        {{!-- Logo --}}
        <div class="border-solid border-4 border-gray-400">
            <a class="#" href="{{@site.url}}">
                {{#if @site.logo}}
                    <img src="{{@site.logo}}" alt="{{@site.title}}" class="w-50 h-50" />
                {{else}}
                    {{@site.title}}
                {{/if}}
            </a>
        </div>
        {{!-- Mobile Menu Button --}}
        <div class="flex items-center border-solid border-4 border-green-600 lg:hidden">
            <button class="mobile-menu px-3 py-2 border rounded text-red-200 border-blue-400">
            <p>Menu</p>
            </button>
        </div>
    </div>
    {{!-- Container - Links and Social Pages --}}
    <div class="md:flex md:items-center nav-links border-solid border-4 border-black-400">
        {{!-- Container - Links --}}
        <div class="md:inline-block border-solid border-4 border-yellow-600">
            {{navigation}}
        </div>
        {{!-- Container - Social Pages --}}
        <div class="flex flex-row md:items-center justify-around border-solid border-4 border-purple-600">
            <ul class="inline-block border-solid border-4 border-teal-600">
                {{#if @site.facebook}}
                <li class="px-2"><a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> icons/facebook}}</a></li>
                {{/if}}
                {{#if @site.twitter}}
                <li class="px-2"><a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> icons/twitter}}</a></li>
                {{/if}}
                <li class="px-2"><a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a></li>
            </ul>
        </div>
    </div>
</nav>