Возникли проблемы с центрированием div в моем проекте Vue с помощью CSS. ⇐ Javascript

[Anonymous]

Мой код по какой-то причине не центрирует контейнеры/текст должным образом, а вместо этого центрирует их по вертикали, а не по горизонтали.
Вместо горизонтально центрированного текста будет занимать место слева от центр (изображение прилагается)
Буду признателен за любую помощь, и если я делаю какую-то глупую ошибку, пожалуйста, дайте мне знать


Вот прикрепленный код
(Панель управления)

Код: Выделить всё

import Navbar from '@/components/TheNavbar.vue';






Welcome to the Dashboard!






.title {
font-size: 40px;
font-weight: 600;
}

.container {
display: flex;
justify-content: center;
align-items: center;
}

(index.js для маршрутизатора)

Код: Выделить всё

import { createRouter, createWebHistory } from 'vue-router'
import LandingPage from '../views/LandingPage.vue'
import LoginSignup from '../views/LoginSignup.vue'
import DashboardPage from '../views/DashboardPage.vue'
import BudgetPage from '../views/BudgetPage.vue'
import AnalyticsPage from '../views/AnalyticsPage.vue'
import AccountPage from '../views/AccountPage.vue'

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'Landing',
component: LandingPage,
},

{
path: '/loginsignup',
name: 'LoginSignup',
component: LoginSignup,
},

{
path: '/dashboard',
name: 'Dashboard',
component: DashboardPage,
},

{
path: '/budget',
name: 'Budget',
component: BudgetPage,
},

{
path: '/analytics',
name: 'Analytics',
component: AnalyticsPage,
},

{
path: '/account',
name: 'Account',
component:  AccountPage,
}
],
})

export default router

(App.vue)

Код: Выделить всё

import { RouterLink, RouterView } from 'vue-router'

(main.js)

Код: Выделить всё

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

(index.html)

Код: Выделить всё

EZ Budget

(main.css)

Код: Выделить всё

@import './base.css';

#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
}

a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}

@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}

@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}

#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}

Вот как выглядит структура моего проекта


Заранее благодарим за любую помощь < /п>

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-with-css