How to properly configure element positions with Tailwind CSS

I’m working on a Next.js project using Tailwind CSS for styling. I need to position elements horizontally from the center of the page so that they don’t shift or overlap each other, with the possibility of vertical scrolling. I would like to find a solution other than using large indents, like mt-96. How can this layout be achieved in Tailwind CSS?

The code I write pushes the text “MY PROJECTS” outside the page and I don’t know how to fix it. Code:

function Main() {
    return (
        <div className = "flex flex-col text-center ">
            <m.div
                initial={{ opacity: 0, x: -100 }}
                animate={{ opacity: 1, x: 0 }}
                className="flex flex-row"
                transition={{ duration: 0.1, ease: "easeOut" }}>
                <div className="navbar-container">
                    <NavbarM />
                </div>
                <div className="flex md:flex-row justify-start text-left w-full mx-auto">
                    <div>

                        <p className='uppercase text-sm tracking-widest text-[#ffffffb7] text-left p-3 ml-14 '>Let's work together</p>

                        <h1 className='text-6xl text-[#B1BDC9] text-center sm:hidden font-face-my69'>
                            MY <span className="text-[#d2d2d2] whitespace-nowrap">PROJECTS.</span>
                        </h1>

                    </div>
                </div>

            </m.div>
            
            {/* Project element */}

            <div className="w-full flex flex-col">

                <ProjectItems
                    title_1='Drone-Face-Tracking'
                    title_2='PyTorch'
                    backgraundImg={Tello}
                />


                <ProjectItems
                    title_1='Unity Game' 
                    title_2='Welcome to my Unity game project'
                    backgraundImg={Unity}
                />

                <ProjectItems
                    title_1='Bagging Algorithm' 
                    title_2='Sklearn'
                    backgraundImg={Bagging_algoritm}
                />

            </div>
        </div>
    );
};

export default Main;