Can’t apply margin-right to relatively positioned element

I am working in Vue to build a series of cards that scroll across a mobile screen in the x-direction. It’s sort of like a testimonial section where the user can scroll right or left to see new testimonials.

I am able to apply a left margin to the cards however I can’t add a right margin to the final card so that it can be scrolled into the center of the screen.

Here is the code sandbox: https://6ky1r.csb.app/ Note, this is designed for the mobile but you can see the issue on the desktop view also.

When you scroll all the way to the right the white background of the card goes all the way to the edge which is not desired.

<template>
  <div class="homePageTwo">
    <div class="cardHolder">
      <div class="cardSpace" v-for="card in cards" :key="card.index">
        <SlidingCard :title="card.title" :content="card.content" :icon="card.icon"/>
      </div>
    </div>
  </div>
</template>

<script>
import SlidingCard from "./SlidingCard.vue";

export default {
  name: "App",
  components: {
    SlidingCard
  },
  data() {
    return {
      cards: [
        {
          title: "Food Services",
          content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          title: "Assisted Living",
          content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          title: "Retail",
          content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          title: "Education",
          content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        }
      ]
    };
  }
};
</script>

<style>
.homePageTwo {
  height: 100vh;
  background-color: #f7f8fc;
  padding-top: 3rem;
}
.cardHolder {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: mandatory;
  scroll-snap-type: x mandatory;
}
.cardSpace {
  padding: 2.5rem;
  background-color: #ffffff;
  margin-left: 1rem;
  margin-right: 1rem;
}
</style>

<template>
  <div class="slidingCard">
    <div class="photoHolder">
      <img class="homePageOneImg" :alt="alt" :src="icon">
    </div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: "SlidingCard",
  data() {
    return {};
  },
  props: ["title", "content", "icon", "alt"]
};
</script>

<style scoped>
.slidingCard {
  background-color: #ffffff !important;
  width: 60vw;
  display: inline-flex;
  flex-direction: column;
  position: relative;
  scroll-snap-align: center;
}
.photoHolder {
  height: 10rem;
  line-height: 10rem;
  border-radius: 90px;
  background-color: #f7f8fc;
  width: 8rem;
  margin: auto;
}
img {
  vertical-align: middle;
  height: 75px;
  width: 75px;
}
h1 {
  font-size: 18px;
  font-weight: bold;
}
p {
  font-size: 1rem;
  white-space: normal !important;
}
</style>

Answer

See margin collapsing.

I see a couple of simple fixes:

Option 1: Adding margin: 0 1rem; to the cardHolder.

Option 2: Add a hidden border after the last child. See this.

Advertisement

Answer