Tailwind CSS导航栏移动端视图无法全屏显示如何解决

使用Tailwind CSS开发个人网站时，手机视图下导航栏无法占满全屏宽度，问题效果如下：

已尝试给导航栏添加w-full类设置满宽，未解决问题。
当前导航栏代码如下：

<nav class="flex justify-between bg-blue-500 w-full">
        <div class="ncrt-sol mx-48 my-6">
            <span class="text-white font-bold text-xl cursor-default">NCERT Solutions</span>
        </div>
        <div class="links">
            <ul class="flex mx-40 my-6">
                <li><a href="#" class="mx-8 text-white font-bold text-lg hover:text-blue-500 hover:bg-white px-6 py-2 hover:rounded-3xl duration-150">Home</a></li>
                <li><a href="solution.html" class="mx-8 text-white font-bold text-lg hover:text-blue-500 hover:bg-white px-6 py-2 hover:rounded-3xl duration-150">Solutions</a></li>
                <li><a href="contact.html" class="mx-8 text-white font-bold text-lg hover:text-blue-500 hover:bg-white px-6 py-2 hover:rounded-3xl duration-150">Contact</a></li>
            </ul>
        </div>
    </nav>

问题和导航栏本身的宽度设置无关，核心是内部元素的固定大边距在窄屏下溢出：

• logo容器设置了mx-48（左右固定12rem外边距），导航链接容器设置了mx-40（左右固定10rem外边距），每个导航链接也设置了mx-8（左右固定2rem外边距）
• 这些固定边距在手机窄屏上累加后的总内容宽度远大于视口宽度，直接把页面撑出横向滚动条。w-full仅能让导航栏宽度等于父元素宽度，当父元素（body/根节点）被溢出内容撑宽后，导航栏自然无法匹配手机屏幕宽度，视觉上就会出现不满屏、左右留白的问题。

• 把所有固定水平外边距、内边距改成Tailwind响应式写法，移动端用小间距，到大屏断点后再使用原有大间距，避免窄屏内容溢出
• 给导航栏或者body节点添加overflow-x-hidden做兜底，防止偶发的横向滚动
• 如果要做更好的移动端适配，建议在小屏幕下将横向排列的导航改为汉堡折叠菜单，避免多个链接挤在一行溢出。

修改后的基础可用代码参考：

<nav class="flex justify-between items-center bg-blue-500 w-full overflow-x-hidden">
        <div class="ncrt-sol mx-4 md:mx-24 lg:mx-48 my-6">
            <span class="text-white font-bold text-xl cursor-default">NCERT Solutions</span>
        </div>
        <div class="links">
            <ul class="flex mx-2 md:mx-20 lg:mx-40 my-6">
                <li><a href="#" class="mx-2 md:mx-4 lg:mx-8 text-white font-bold text-base md:text-lg hover:text-blue-500 hover:bg-white px-2 md:px-4 lg:px-6 py-2 hover:rounded-3xl duration-150">Home</a></li>
                <li><a href="solution.html" class="mx-2 md:mx-4 lg:mx-8 text-white font-bold text-base md:text-lg hover:text-blue-500 hover:bg-white px-2 md:px-4 lg:px-6 py-2 hover:rounded-3xl duration-150">Solutions</a></li>
                <li><a href="contact.html" class="mx-2 md:mx-4 lg:mx-8 text-white font-bold text-base md:text-lg hover:text-blue-500 hover:bg-white px-2 md:px-4 lg:px-6 py-2 hover:rounded-3xl duration-150">Contact</a></li>
            </ul>
        </div>
    </nav>

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