This is my current code:

<q-page padding class="row items-center">
<div class="col-12">

    <div class="row justify-center">

      <div class="col-6">
        <q-input class="q-ma-sm" dark v-model="text" label="Username or Email" />
        <q-input class="q-ma-sm" dark v-model="text" type = "password" label="Password" />
        <q-btn class="q-ma-sm" color = "secondary" label="Log In" />
      </div>

    </div>
    <q-space></q-space>
    <hr>

    <div class="row justify-center">

      <div class="col-6">

        <div class="row justify-center">

          <div class="col-12">
            <q-input class="q-ma-sm" dark v-model="text" label="Display Name" />
            <q-btn class="q-ma-sm" color = "secondary" label="Create Game" />
          </div>

        </div>

        

        <div class="row justify-center">

          <div class="col-12">

            <div class="row">
              <q-btn class="q-ma-sm" color = "secondary" label="Join Using ID" />
              <q-btn class="q-ma-sm" color = "secondary" label="Join Random" />
            </div>
            
          </div>

        </div>

      </div>

    </div>

  </div>
</q-page>

I tried using q-gutter but it doesn’t seem to be working. Is there a quasar way to do this or is my only option to override the CSS and manually set a large margin?

Any help would be appreciated!