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;