Как выровнять содержимое этой страницы без горизонтальной полосы прокрутки?

Привет, я создаю простой веб-сайт с использованием CSS flexbox, но по некоторым причинам мой макет в About.vue растягивается с этой горизонтальной полосой, только этот компонент находится в mainLayout.vue, и я не могу понять, что не так, создавая эту проблему. Кто-нибудь знал, как это исправить?

MainLayout.vue

<template>
  <div class = "wrapper--main">
    <Navbar />
    <Hero />
    <main>
      <slot />
    </main>
    <Footer />
  </div>
</template>
<script lang = "ts">
import Hero from "../components/Hero.vue";
import Footer from "../components/Footer.vue";
import Navbar from "../components/Navbar.vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: { Navbar, Footer, Hero },
});
</script>
<style lang = "sass">
@import "../styles/mainLayout.sass"
@import "../styles/variables.sass"
@import "../styles/utilitys.sass"
</style>

MainLayout.sass

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap')
*,
*::before,
*::after
    box-sizing: border-box
    margin: 0px
    padding: 0px

img,
picture,
svg
    max-width: 100%
    display: block
    object-fit: cover

img
    object-fit: cover
@media (min-width: 768px)
    html
        font-size: 130%

body
    font-family: 'Lato', sans-serif
    font-weight: 400
    line-height: 1.65
    max-width: 2000px
    background-color: hsl(var(--white))
    color: hsl(var(--text))

.wrapper--main
    display: grid
    grid-template-rows: auto 1fr auto
    min-height: 100vh

main
    display: grid
    gap: var(--size-fluid-6)
    margin-bottom: var(--size-fluid-5)
    margin-top: var(--size-fluid-5)

Index.vue

<template>
  <MainLayout><About /> </MainLayout>
</template>
<script lang = "ts">
import MainLayout from "../layouts/MainLayout.vue";
import About from "../components/About.vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: { MainLayout, About },
});
</script>
<style lang = "sass">
</style>

О.vue

<template>
  <div class = "about-container">
    <div class = "wrapper gap">
      <div class = "title-container--about gap--sm">
        <div class = "title-wrapper">
          <h2 class = "h2">lorem ipsum</h2>
          <p class = "title-container--sm">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor
            iusto impedit molestiae quo, labore perspiciatis quia, deserunt quis
            nobis asperiores, delectus ut! Quaerat ut molestiae sunt ex
            molestias fuga quis. orem ipsum dolor sit amet consectetur,
            adipisicing elit. Dolor iusto impedit molestiae quo, labore
            perspiciatis quia, deserunt quis nobis asperiores, delectus ut!
            Quaerat ut molestiae sunt ex molestias fuga quis.
          </p>
        </div>
        <div class = "arrow--map">
          <img class = "icon--lg" src = "../icons/arrow-map.svg" alt = "" />
        </div>
        <div class = "container-about-btn-map">
          <img class = "icon--lg about-map" src = "../icons/map.svg" alt = "" />
          <button class = "btn btn--primary about-btn">lorem ipsum</button>
        </div>
      </div>
      <img class = "img-about only-desktop" src = "../img/about.jpg" alt = "" />
    </div>
  </div>
</template>
<script lang='ts'>
import { defineComponent } from "vue";
export default defineComponent({});
</script>
<style lang = "sass">
.title-container--sm
  width: var(--size-fluid-10)
  flex-grow: 0
.about-map
  margin-right: auto
.about-btn
  margin-right: auto
.container-about--btn-map
  display: flex
  flex-direction: column
  justify-content: center
  width: 200px
.gap--sm
  gap: var(--size-fluid-4)
.title-container--about
  display: flex
  flex-direction: column
.arrow--map
  display: flex
  justify-content: center
.gap
  gap: var(--size-fluid-8)
.about-container
  margin-left: var(--size-fluid-7)
  margin-right: var(--size-fluid-7)
@media (max-width: 1440px)
  .only-desktop
    display: none
</style>