I have this homepage feed:

<div class="feed-wrapper">  
    <template v-if="type === 'product'">  
        <product-item section="members-circle" :item="product" v-for="product in data" :key="product.slug"></product-item>  
    </template>  
    <template v-else>  
        <article-item v-for="article in data" :key="article.id" :article="article" :type="type"></article-item>  
    </template>  
    <template v-else-if="type === 'offer'">  
        <offers-item :offer="offer" v-for="offer in data" :key="offer.brand" ></offers-item>  
    </template>  
</div>

For the first two template types, I have more than one item and horizontal scrolling was enabled.
For offer, I have only one item and want to disable horizontal scrolling.

homepage-feed.vue layout:

<div class="feed-container">
    <div class="feed-wrapper">
        <div class="offer-item-wrapper">...</div>
    </div>
</div>

offers-item.vue:

<template>
    <div class="offer-item-wrapper">
        <div class="brand-image"... >
        <div class="offer-item" ... >   
    </div>
</template>

I tried adding the following CSS to .offer-item-wrapper, .feed-wrapper and .feed-container div:

max-width: 100%;
overflow-x: hidden;

And the horizontal scrolling was still enabled.
Please let me know how to properly fix that? Thank you so much.

I was expected to disable horizontal scrolling for the one-item offer section but unable to acheive it through setting overflow-x: hidden and max-width: 100% to related selectors.