Mobile responsive issue with framer motion in react

I build this project using React and bootstrap and it was complete responsive when I added framer motion it cause responsive issue as can be seen in the image. What I am doing wrong? here you can see it live

import { motion } from "framer-motion";
const Home = () => {
const { t, ready } = useTranslation();
if (!ready) return "loading translations...";
const testimonialData = t("testimonialData1", { returnObjects: true });
const serviceData = t("serviceSection", { returnObjects: true });
return (
<div>
<motion.div
initial={{ x: 1400, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.2,
opacity: { duration: 1 },
ease: "easeIn",
duration: 1,
}}
>
<RtoLVector />
</motion.div>
<Services cardDatas={serviceData} />
<motion.div
initial={{ x: -1400, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.2,
opacity: { duration: 1 },
ease: "easeIn",
duration: 1,
}}
>
<LtoR />
</motion.div>
<Solutions />
<motion.div
initial={{ x: 1400, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.2,
opacity: { duration: 1 },
ease: "easeIn",
duration: 1,
}}
>
<RtoLVector />
</motion.div>
<Testimonials />
<motion.div
initial={{ x: -1400, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.2,
opacity: { duration: 1 },
ease: "easeIn",
duration: 1,
}}
>
<LtoR />
</motion.div>
<Contact />
</div>
);
};
export default Home;

I played with x and y to resolve the issue but cant solve it.