Vs input does not let itself position center

[Haso5894]

Hi,

I have a nuxt/vue project where I use the latest version of vuesax and vuetify together, I use a card from vuetify and inside it I place vs-input from vuesax but it does not get centered. I do not want to use offset because it is not responsive, but something like mx-auto where the position is taken automatically and gives equal distance to left and right.

this is so far my code:

<template>
  <div >
    <v-app >
      <v-card
        class="mx-auto my-auto"
      >


        <v-img :src="require('assets/logo2.jpg')"
          height="250"

        >
          <v-card-title>Cafe Badilico</v-card-title>

        </v-img>

        <v-divider class="mx-4"></v-divider>

        <v-card-title>Please enter your credentials</v-card-title>

        <v-divider class="mx-4"></v-divider>


        <v-card-text >
            <vs-row  direction="row">
              <vs-col class="mx-auto" >
                <vs-input  >
                  <template #icon>
                    <i class='bx bx-user'></i>
                  </template>
                </vs-input>
                <vs-input  placeholder="User name">
                  <template #icon>
                    <i class='bx bx-user'></i>
                  </template>
                </vs-input>
              </vs-col>
            </vs-row>

        </v-card-text>

        <v-divider class="mx-4"></v-divider>

        <v-card-actions>
          <div class="flex-end">
            <vs-button :active="active = 0"
              border
              flat
            >
              Active

            </vs-button>
          </div>
        </v-card-actions>
      </v-card>
    </v-app>
  </div>
</template>