[SOLVED] Having trouble with centering a div in my Vue project with CSS

Having trouble with centering a div in my Vue project with CSS

My code for some reason doesn't center containers/text properly but instead centers them vertically, but not horizontally.

Instead of horizontally centered text will take up space on the left of the center (image attached)

Would appreciate any help and if I am making some dumb mistake please do let me know

Here is the code attached (Dashboard)

<!-- src/views/Dashboard.vue -->

<script setup>
import Navbar from '@/components/TheNavbar.vue';
</script>

<template>
  <div>
    <Navbar />
    <div class="container">
      <div class="title">Welcome to the Dashboard!</div>
    </div>
  </div>
</template>

<style scoped>

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

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

</style>

(index.js for router)

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)

<!-- src/App.vue -->

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <main>
      <RouterView />
  </main>
</template>


<style scoped>



</style>

(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)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EZ Budget</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.0/css/line.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

(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;
  }
}

Here is what my project structure looks like

Thanks in advance for any help :)

Solution

one approach can be to delete grid-template-columns: 1fr 1fr and then add the following in the dashboard component class:

width: 100%; min-height: 80vh;