when in pc screen it shows full width but when switch to mobile it is not full width looks like it’s width is 80-90% also my constent is overflowing outside so it is not so responsive on mobile whyy [enter image description here]

(https://i.sstatic.net/82Gf6xDT.png)

import React, { useState } from ‘react’;

import { Link } from ‘react-router-dom’;

import { TiThMenuOutline } from “react-icons/ti”;

import { GiCrossMark } from “react-icons/gi”;

export default function Navbar() {

const [isOpen, setIsOpen] = useState(false);

const [rotating, setRotating] = useState(false);

const [show, setShow] = useState(false)

const toggleMenu = () => {
    setIsOpen(!isOpen);
};

const toggleMain = () => {
    setRotating(true);
    setShow(!show);
    setTimeout(() => {
        setRotating(false);
    }, 500); // This should match the duration of the rotate animation
};

return (
    <div className='bg-custom-gradient flex justify-center'>
        <nav className=" bg-gradient-to-r from-[#1f353f] via-[#79a8b2] to-[#094c57] shadow-lg border-2 border-white rounded-3xl fixed p-4 w-full font-dongle text-2xl">
            <div className="container mx-auto flex justify-between items-center">
                <div className="text-white text-4xl font-semibold">Portfolio</div>
                <div className="relative">
                    <div className="flex items-center justify-between w-full">
                        <div className="overflow-hidden w-full">
                            <div className={`${show ? "hidden md:flex gap-4 ease-in duration-500" : 'flex gap-4 mt-[-30px] md:mt-[-30px] ease-in duration-700'}`}>
                                <Link to="/" className="text-white hover:text-white">Home</Link>
                                <Link to="/about" className="text-white hover:text-white">About</Link>
                                <Link to="/services" className="text-white hover:text-white">Services</Link>
                                <Link to="/projects" className="text-white hover:text-white">Projects</Link>
                                <Link to="/contact" className="text-white hover:text-white">Contact</Link>
                            </div>
                        </div>
                        <div>
                            <div className="hidden md:flex ml-4 justify-end">
                                {show ? (
                                    <button
                                        className={`text-white hover:text-white ${rotating ? 'animate-rotate' : ''}`}
                                        onClick={toggleMain}
                                    >
                                        <GiCrossMark />
                                    </button>
                                ) : (
                                    <button
                                        className={`text-white hover:text-white ${rotating ? 'animate-rotate' : ''}`}
                                        onClick={toggleMain}
                                    >
                                        <TiThMenuOutline />
                                    </button>
                                )}
                            </div>
                        </div>
                    </div>

                </div>
                <div className="md:hidden overflow-visible ">
                    <button
                        onClick={toggleMenu}
                        className="text-black focus:outline-none focus:text-black ml-[-90px] overflow-visible "
                    >
                        <TiThMenuOutline  />
                    </button>
                </div>
            </div>
            {isOpen && (
                <div className="md:hidden mt-2 space-y-2">
                    <Link to="/" className="block text-gray-300 hover:text-white">Home</Link>
                    <Link to="/about" className="block text-gray-300 hover:text-white">About</Link>
                    <Link to="/services" className="block text-gray-300 hover:text-white">Services</Link>
                    <Link to="/projects" className="block text-gray-300 hover:text-white">Projects</Link>
                    <Link to="/contact" className="block text-gray-300 hover:text-white">Contact</Link>
                </div>
            )}
        </nav>
    </div>
);

}

import React from ‘react’;

import Navbar from ‘../comps/Navbar’;

import Footer from ‘../comps/Footer’;

export default function Home() {

return (

<div className=’bg-custom-gradient min-h-screen flex flex-col font-dongle text-4xl w-full’>
<Navbar />

<div className=’flex-grow mt-32′>

hello

</div>

<Footer />

</div>

);

}

// Footer.js

import React from ‘react’;

import { Link } from ‘react-router-dom’;

export default function Footer() {

return (

<footer className=”bg-gray-800 text-gray-300 py-4″>

<div className=”container mx-auto text-center”>

<div className=”mb-2″>

<Link to=”/” className=”text-gray-300 hover:text-white mx-2″>Home</Link>

<Link to=”/about” className=”text-gray-300 hover:text-white mx-2″>About</Link>

<Link to=”/services” className=”text-gray-300 hover:text-white mx-2″>Services</Link>

<Link to=”/projects” className=”text-gray-300 hover:text-white mx-2″>Projects</Link>

<Link to=”/contact” className=”text-gray-300 hover:text-white mx-2″>Contact</Link>

</div>

<div className=”text-sm”>

© {new Date().getFullYear()} Portfolio By Mukund. All rights reserved.

</div>

</div>

</footer>

);

}

i want my code responsive on mobile also although i use tailwind and i make it mobile responsive i can not got good view on mobile