Different components of a website overlapping with each other – Artificial Intelligence

Sorry this is my first time trying to create my own website and I’m trying to learn it on my own, so my questions might be a bit dumb. I’m currently creating a website to host all of my certifications and basically just a digital portfolio, and while doing so I have separated parts of my website into different .js files to work on them easier. But now parts of them have started to overlap with each other. Is there anyway I can align them properly to fix this?
(https://i.stack.imgur.com/nTdg9.png) (https://i.stack.imgur.com/d1awc.png)

Here’s my CSS and parts which are overlapping with each other.

@tailwind base;
@tailwind components;
@tailwind utilities;

.cardIHS,
.cardCPS {
  width: 350px;
  height: 500px;
  perspective: 800px;
  display: flex;
  align-items: center;
}

.cardIHS:hover > .card, 
.cardCPS:hover > .card {
  cursor:pointer;
  transform: rotateY(180deg) rotateZ(180deg);
}

.card {
  height: 100%;
  width: 100%;
  position:relative;
  transition:transform 1500ms;
  transform-style:preserve-3d;
}

.front-ihs,
.front-cps,
.back {
  height: 100%;
  width: 100%;
  border-radius: 2rem;
  box-shadow: 0 0 5px 2px rgba (50,50,50,0.25);
  position:absolute;
  backface-visibility: hidden;
}

.front-ihs {
  background-image: url(../src/assets/IHS.jpg);
}

.front-cps {
  background-image: url(../src/assets/CPS.jpg);
}

.back {
  background-color: #3a3a3a;
  transform: rotateY(180deg) rotateZ(180deg);
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5rem;
}

.btn {
  background: linear-gradient(
    92.23deg,
    #0101E2 21.43%,
    #1735EB 50.63%,
    #3B83F7 100%,
    #4FAFFF 117.04%
  );
  box-shadow: 0px 4.42184px 107.23px rgba(0, 0, 0, 0.51);
}

.btn:hover {
  background: linear-gradient(
    92.23deg,
    #4FAFFF 21.43%,
    #3B83F7 50.63%,
    #1735EB 100%,
    #0101E2 117.04%
  );
}

.gradient,
.active {
  background: linear-gradient(
    92.23deg,
    #0101E2 21.43%,
    #1735EB 50.63%,
    #3B83F7 100%,
    #4FAFFF 117.04%
  );
}

.active {
  color: #fff;
  padding: 1rem;
  border-radius: 100%;
}

@layer base {
  body {
    @apply font-secondary text-lg leading-8 text-white;
  }
  .h2 {
    @apply font-primary text-[32px] mb-6 tracking-[10%] uppercase;
  }
  .h3 {
    @apply font-primary font-semibold text-[26px] mb-6 leading-[46px];
  }
  .btn {
    @apply rounded-full font-primary text-white font-medium;
  }
  .btn-sm {
    @apply h-[48px] px-6 text-sm;
  }
  .btn-lg {
    @apply h-[56px] px-10 text-base;
  }
  .btn-link {
    @apply text-base;
  }
  .text-gradient {
    @apply bg-gradient-to-r text-transparent bg-clip-text from-[#4FAFFF] to-[#0101E2] font-bold font-primary hover:from-[#0101E2] hover:to-[#4FAFFF];
  }
  .section {
    @apply py-8 lg:py-24 lg:h-screen flex items-center;
  }
}

BANNER (TOP PART)

import React from 'react';
//avatar import
import Avatar from '../assets/Avatar.png';
//icons import
import {BsDiscord} from 'react-icons/bs';
import {AiFillInstagram, AiFillLinkedin} from 'react-icons/ai';
//importing animations
import {TypeAnimation} from 'react-type-animation';
//motion
import {motion} from 'framer-motion';
//fade in animation (local)
import {fadeIn} from '../variants.js';

const Banner = () => {
  return <section 
  id = 'Home'
  className='min-h-[85vh] lg:min-h-[78vh] flex items-center'>
    <div className='container mx-auto'>
      <div className='flex flex-col gap-y-8 lg:flex-row lg:items-center lg:gap-x-12'>
      {/*text*/}
      <div className='flex-1 text-center font-secondary lg:text-left'>
        <motion.h1 
        variants={fadeIn('up', 0.3)} 
        initial='hidden' whileInView={'show'} 
        viewport={{once: false, amount: 0.7}} 
        className='text-[55px] font-bold leading-[0.8] lg:text-[110px]'>
          IHSAN <span> HASHIR</span>
        </motion.h1>
        <motion.div
        variants={fadeIn('up', 0.4)} 
        initial='hidden' whileInView={'show'} 
        viewport={{once: false, amount: 0.7}} 
        className='mb-6 text-[36px] lg:text-60[px] font-secondary font-semibold uppercase leading-[1]'>
          
          <TypeAnimation sequence={[
            'High School Student',
            2000,
            'Artificial Intelligence Aspirant',
            2000,
            'Growing and Learning Developer',
            2000,
          ]} 
          speed={50}
          className= 'text-accent'
          wrapper='span'
          repeat={Infinity}
          />
        </motion.div>
        <motion.p 
        variants={fadeIn('up', 0.5)} 
        initial='hidden' 
        whileInView={'show'} 
        viewport={{once: false, amount: 0.7}} 
        className= 'mb-8 max-w-lg mx-auto lg:mx-0'>
          Hello there! Welcome to my website, which shows projects I'm working on, courses I've completed, my current education, and anything else regarding my professional life. Have fun browsing.
        </motion.p>
        <motion.div 
        variants={fadeIn('up', 0.6)} 
        initial='hidden' 
        whileInView={'show'} 
        viewport={{once: false, amount: 0.7}} 
        className='flex max-w-max gap-x-6 items-center mb-12 mx-auto lg:mx-0'>
          <a href='#' className = 'text-gradient btn-link'>
            Contact me! 
          </a>
        </motion.div>
        {/*socials*/}
        <motion.div 
        variants={fadeIn('up', 0.7)} 
        initial='hidden' 
        whileInView={'show'} 
        viewport={{once: false, amount: 0.7}} 
        className='flex text-[20px] gap-x-6 max-w-max mx-auto lg:mx-0'>
          <a href= '#'>
            <BsDiscord />
          </a>
          <a href= '#'>
            <AiFillInstagram />
          </a>
          <a href= '#'>
            <AiFillLinkedin />
          </a>
        </motion.div>
      </div>
      {/*image*/}
      <motion.div 
      variants={fadeIn('down', 0.5)} 
      initial='hidden' 
      whileInView={'show'} 
      className='hidden lg:flex flex-1 max-w-[320px] lg:max-w-[482px]'>

        <img src ={Avatar} alt = "" />
      </motion.div>
    </div>
    </div>
  </section>;
};

export default Banner;

ABOUT(BOTTOM PART)

import React from 'react';
//intersection observer
import {useInView} from 'react-intersection-observer';


const About = () => {
  const [ref, inView] = useInView({
    threshold:0.5,
  });
  return <section 
  id = 'About'
  className='section'
  ref = {ref}
  >
    <div className='container mx-auto'>
      <div>
        {/*cards for education*/}
        {/*IHS*/}
        <div class='cardIHS'>
          <div class='card'>
            <div class='front-ihs'></div>

            <div class='back'>
            <h1>Back of Card!</h1>
            <p>Additional info on back</p>
            </div>
         </div>
        </div>

        {/*CPS*/}
        <div class='cardCPS'>
          <div class='card'>
            <div class='front-cps'></div>

            <div class='back'>
            <h1>Back of Card!</h1>
            <p>Additional info on back</p>
            </div>
         </div>
        </div>

      </div>
    </div>
  </section>;
  
};

export default About;

I tried using flex and align-items but either but none of them seemed to give the result I wanted. Again I apologize for asking a dumb question.