Why aren't my two divs centered in mobile view? I am using Vuetify CSS flex helper justify-center to try and achieve it, but it doesn't seem to be working. Even when I use justify-sm-center, it still doesn't work. What am I missing?
<v-col cols="12">
<v-card elevation="3" class="d-flex flex-column flex-sm-row justify-center pt-2 pb-2">
<div class="pt-2 pl-4">
<span class="textoDos--text"><strong>Not registered yet?</strong></span>
</div>
<div>
<v-btn
plain
class="textoDos--text"
to="/registration"
>
<strong>Create an account</strong>
</v-btn>
</div>
</v-card>
</v-col>
Note: The flex-direction is correct. I need it to be row on desktop/tablet and column on mobile. You can check it out on this codepen.