My html navbar not working well in phone screen

Question

Hey I am using tailwind css to complete my website. My navbar doesn't gives me full screen view in phone screen. Please help!!!

ScreenShot of bug Click here

You can check original site hosted on github - Website Link

HTML and Tailwind-CSS :

<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>

I tried width-full by using w-full class but it is still not working...

Answer 1

Try with class w-screen which will compile to 100%vw

Edit:

The margin of classes ncrt-sol and flex class is too high for mobile devices.

So this is causing the trouble . So instead of mx-40 change it to mx-4

So the final code is :

<nav class="flex justify-between bg-blue-500 w-full">
        <div class="ncrt-sol mx-4 my-6">
            <span class="text-white font-bold text-xl cursor-default">NCERT Solutions</span>
        </div>
        <div class="links">
            <ul class="flex mx-4 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>

And change the margin likewise and use breakpoints for larger screen like md: lg: and the like.

Hope it helps!