how to align this page contnet without horizontal scroll bar?-CodePudding

Hi I am creating simple website using CSS flexbox, but from some reasons my layout in About.vue stretch out with this horizontal bar only this component is in mainLayout.vue, and I can't figure out what is wrong making this problem. Did someone know how to fix it?

MainLayout.vue

<template>
  <div >
    <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>

About.vue

<template>
  <div >
    <div >
      <div >
        <div >
          <h2 >lorem ipsum</h2>
          <p >
            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 >
          <img  src="../icons/arrow-map.svg" alt="" />
        </div>
        <div >
          <img  src="../icons/map.svg" alt="" />
          <button >lorem ipsum</button>
        </div>
      </div>
      <img  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>

CodePudding user response：

Try adding this:

html, body
    ...
    max-width: 2000px
    width: 100vw
    overflow-x: hidden

Although the overflow-x should be a last-resort if the method above fails