How can I use Vuetify CSS Spacing Helpers?

Question

I'm building a static website using Vue and Vuetify. Based on the documentation, it supports CSS Spacing like py-5 and mb-3. I've tried adding it, but it doesn't want to take. I don't really want to have to manually add the spacing with each element, but I'm at a loss right now.

Here's one of the .Vue files for example of what I'm doing. None of the spacing classes are working whatsoever. Is there something I'm not implementing properly? I've also added my main.js file for reference as well.

Section_One.vue

<template>
  <v-main>
       <div id="social-section" class="py-5" >
           <div>
        <v-container fluid>
             <div class="text-center">
                <img src="../assets/images/allcologo.png" alt="" class="mx-auto mb-4" height="80">
                <h2>The first truly centerlized soical care plateform</h2>
                <p class="c2 mb-5">allco was created hand-in-hand with CBOs to streamline workflow and bridge communication gaps in community care.</p>
            </div>
            <v-row>
             <div class="col-md-6 mb-4">
                    <div class="social-card">
                        <div class="row">
                            <div class="col-2">
                                <img src="../assets/images/icon_3.png" alt="" class="d-inline-block" height="50px">
                            </div>
                            <div class="col">
                                <h4 class="d-inline-block">A single source of truth</h4>
                                <p class="c2">Finally, a shared digitol intake & referral system with a completely integrated resource directory. </p>
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="social-card">
                        <div class="row">
                            <div class="col-2">
                                <img src="../assets/images/icon_2.png" alt="" class="d-inline-block" height="50px">
                            </div>
                            <div class="col">
                                <h4 class="d-inline-block">Lose the silos, collaborate more.</h4>
                                <p class="c2">Now CBOs county-wide can eliminate overlap in
                                    daily operations and better cross communicate. </p>
                            </div>
                        </div>  
                    </div>
                </div>
                                <div class="col-md-6 mb-4">
                    <div class="social-card">
                        <div class="row">
                            <div class="col-2">
                                <img src="../assets/images/icon_1.png" alt="" class="d-inline-block" height="50px">
                            </div>
                            <div class="col">
                                <h4 class="d-inline-block">Close the loops, bridge the gaps.</h4>
                                <p class="c2">Get real-time updates on community member status, eligibility, and even services received.  </p>
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="social-card">
                        <div class="row">
                            <div class="col-2">
                                <img src="../assets/images/icon_0.png" alt="" class="d-inline-block" height="50px">
                            </div>
                            <div class="col">
                                <h4 class="d-inline-block">Better data, better insights.</h4>
                                <p class="c2">Deeper community health insights create awareness, grant opportunities, and fuels optimized care. </p>
                            </div>
                        </div>  
                    </div>
                </div>
            </v-row>      
      </v-container>
      </div>
    </div>
  </v-main>
</template>

main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import router from './router'
import 'vuetify/dist/vuetify.min.css';

Vue.config.productionTip = false

new Vue({
  vuetify,
  router,
  render: h => h(App)
}).$mount('#app')

vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/dist/vuetify';


Vue.use(Vuetify);

export default new Vuetify({
});

Answer 1

The cause of this problem was the use of <v-main> tag inside a component. According to Vuetify documentation, it should be used only once inside Vue.app file, right inside <v-app> tag.