Hey there! I'm currently working on a simple website using CSS flexbox, but I'm encountering an issue with my layout in About.vue. For some reason, this component is stretching out with a horizontal bar, even though it's only placed within the mainLayout.vue. I'm really struggling to figure out what's causing this problem. Does anyone have any ideas on how to fix it?
https://i.sstatic.net/GryH1.png
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>
About.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>