Vuetifyを用いて作成した画面にスペースが生じる

実現したいこと

Vutifyを用いたアプリケーションのモックを作成しています。
左側にサイドメニューが表示され、中央に入力フォームを表示したいと考えています。

前提

HTML、CSSとも本当に初心者で、仕事の関係で最近勉強を開始しました。
Vutifyを用いてアプリケーションのモックを作成する必要があるのですが、想定した表示になりません。
実現したいところにも記載した通り、左側にナビゲーションメニュー、中央に簡単な入力フォームを作成したいと考えています。

発生している問題・エラーメッセージ

下記ソースコードを表示したところ、左側のナビゲーション部分と中央の入力フォームの間にスペースが生じています。
このスペースを埋めて、左詰めで表示させるにはどのようにしたら良いでしょうか。

該当のソースコード

基本的にVutifyの公式サイトにあるソースを利用しています。

<template>
  <div class="container">
    <div class="navigation ma-0 pa-0">
      <v-app>
        <v-navigation-drawer :width="180">
          <v-list-item title="Application" subtitle="Application"></v-list-item>
          <v-divider></v-divider>
          <v-list-item link title="Application-A"></v-list-item>
          <v-list-item link title="Application-B"></v-list-item>
          <v-list-item link title="Application-C"></v-list-item>
        </v-navigation-drawer>
      </v-app>
    </div>
    <div class="form ma-0 pa-0">
      <v-app>
        <form @submit.prevent="submit">
          <v-text-field
              v-model="name.value.value"
              :counter="10"
              :error-messages="name.errorMessage.value"
              label="Name"
          ></v-text-field>
          <v-text-field
              v-model="phone.value.value"
              :counter="7"
              :error-messages="phone.errorMessage.value"
              label="Phone Number"
          ></v-text-field>

          <v-text-field
              v-model="email.value.value"
              :error-messages="email.errorMessage.value"
              label="E-mail"
          ></v-text-field>

          <v-select
              v-model="select.value.value"
              :error-messages="select.errorMessage.value"
              :items="items"
              label="Select"
          ></v-select>
          <v-checkbox
              v-model="checkbox.value.value"
              :error-messages="checkbox.errorMessage.value"
              label="Option"
              type="checkbox"
              value="1"
          ></v-checkbox>

          <v-btn
              class="me-4"
              type="submit"
          >
            submit
          </v-btn>

          <v-btn @click="handleReset">
            clear
          </v-btn>
        </form>
      </v-app>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useField, useForm } from 'vee-validate'

const { handleSubmit, handleReset } = useForm({
  validationSchema: {
    name (value) {
      if (value?.length >= 2) return true

      return 'Name needs to be at least 2 characters.'
    },
    phone (value) {
      if (value?.length > 9 && /[0-9-]+/.test(value)) return true

      return 'Phone number needs to be at least 9 digits.'
    },
    email (value) {
      if (/^[a-z.-]+@[a-z.-]+\.[a-z]+$/i.test(value)) return true

      return 'Must be a valid e-mail.'
    },
    select (value) {
      if (value) return true

      return 'Select an item.'
    },
    checkbox (value) {
      if (value === '1') return true

      return 'Must be checked.'
    },
  },
})
const name = useField('name')
const phone = useField('phone')
const email = useField('email')
const select = useField('select')
const checkbox = useField('checkbox')

const items = ref([
  'Item 1',
  'Item 2',
  'Item 3',
  'Item 4',
])

const submit = handleSubmit(values => {
  alert(JSON.stringify(values, null, 2))
})
</script>

<style>
.container{
  display: flex;
}
.navigation{
  width: 25%;
}
.form{
  width: 50%;
}
</style>

試したこと

styleの部分を色々変更したのですが、うまくいかず…。

補足情報（FW/ツールのバージョンなど）

Vueのバージョンは下記の通りです。
@vue/cli 5.0.8

行動規範の内容に同意します

回答1件

ベストアンサー

AIにより生成された文章です

スペースを埋めるためには、v-navigation-drawerとv-appのma-0とpa-0のクラスを削除し、v-navigation-drawerにpermanentとappのプロパティを追加することで解決できます。また、styleの部分も少し修正が必要です。

以下のように修正してみてください。

php
1<template>
2  <div class="container">
3    <div class="navigation">
4      <v-navigation-drawer permanent app :width="180">
5        <v-list-item title="Application" subtitle="Application"></v-list-item>
6        <v-divider></v-divider>
7        <v-list-item link title="Application-A"></v-list-item>
8        <v-list-item link title="Application-B"></v-list-item>
9        <v-list-item link title="Application-C"></v-list-item>
10      </v-navigation-drawer>
11    </div>
12    <div class="form">
13      <v-app>
14        <form @submit.prevent="submit">
15          <!-- 入力フォームのコードはそのままで大丈夫です -->
16        </form>
17      </v-app>
18    </div>
19  </div>
20</template>
21
22<script setup>
23// 省略
24</script>
25
26<style>
27.container {
28  display: flex;
29}
30.navigation {
31  width: 180px;
32}
33.form {
34  flex: 1;
35  padding: 20px;
36}
37</style>