and when i scroll down again the "why atlaz" component returns to normal to where it should be
I made this website using nuxtjs and using vuetifyjs design, and here is the code from the "why atlaz" component:
Code
.row-card-slider {
margin-top: -45.8% !important;
/*background-color: red;*/
}
@media only screen and (min-width: 1904px) {
.row-card-slider {
/*margin-top: -41% !important;*/
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<v-container id="why-atlaz" class="hidden-sm-and-down" style="background-color: #2A384C; padding-top: 130px; padding-bottom: 180px">
<v-row justify="center">
<v-col xs="12" sm="12" md="12" lg="12" xl="9">
<v-row>
<v-col xs="12" sm="12" md="7" lg="7" xl="7">
<v-img :src="require('~/assets/images/why-atlaz/1.png')" max-height="555" />
</v-col>
</v-row>
<v-row justify="end" class="row-card-slider">
<v-col xs="12" sm="12" md="7" lg="7" xl="7">
<v-card style="background-color: #F4E8CA; padding-top: 12%; padding-bottom: 12%">
<v-carousel :show-arrows="true" hide-delimiter-background height="300">
<v-carousel-item v-for="(slide, i) in slides" :key="i" class="pl-16 pr-16">
<v-container>
<v-row class="mb-3">
<v-col cols="12">
<span style="font-size: 34px; line-height: 34px; font-family: 'Ubuntu', sans-serif; color: #2A384C !important; padding-left: 15px">
Why Atlaz?
</span>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<span style="font-size: 24px; line-height: 24px; font-weight: bold; font-family: 'Nunito', sans-serif; color: #2A384C !important; padding-left: 15px" class="text-decoration-underline mb-2">
{{ slide.title }}
</span>
<v-card-text style="font-family: 'Nunito', serif !important; font-size: 20px; color: #2A384C !important">
{{ slide.text }}
</v-card-text>
</v-col>
</v-row>
</v-container>
</v-carousel-item>
</v-carousel>
</v-card>
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</div>:
how to fix the overlapping problem, I've tried various ways but still I don't know why, please help me :)