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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@iconscout/[email protected]/css/line.css">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 đ