The width of my whole app is expanding by itself when i use swiperjs to create a carousel

CAROUSEL PARENT COMPONENT

import FeaturedCarousel from "./FeaturedCarousel";
export default function Featured() {
  return (
    <section className="px-6 lg:px-10">
      <h1 className="text-center lg:text-left text-3xl md:text-4xl lg:text-5xl font-bold tracking-wide">
        Featured Products
      </h1>
      <FeaturedCarousel />
    </section>
  );
}

CAROUSEL CLIENT COMPONENT

"use client";
import { register } from "swiper/element/bundle";
// register Swiper custom elements

export default function FeaturedCarousel() {
  register();
  return (
    <swiper-container
      slides-per-view="3"
      speed="500"
      loop="true"
      css-mode="true"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
    </swiper-container>
  );
}