i need some good styling for this html file, current one doesn't do anything:
dashboard.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link rel="stylesheet" href="../css/styles.css">



</head>
<body>
<div class="container-fluid">
    <!-- Navigation bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Dashboard</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                        <a class="dropdown-item" href="transaction-history.html">Transaction History</a>

                </li>
                <li class="nav-item dropdown">
                        <a class="dropdown-item" href="/dashboard/budgets">Budget Management</a>

                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink3" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Investments
                    </a>

                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink4" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Savings
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink4">
                        <a class="dropdown-item" href="/dashboard/savings">Savings Goals</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink5" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Debt
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink5">
                        <a class="dropdown-item" href="/dashboard/debt">Debt Overview</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Main content -->
    <div class="page-content">
        <div class="row">
            <div class="col">
                <h1 class="welcome-message">Welcome, <span th:text="${currentUser.name}"></span>!</h1>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h3 class="section-title">Recent Transactions</h3>
                        <div class="table-responsive">
                            <table class="table table-striped transactions-table">
                                <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Description</th>
                                    <th>Amount</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="transaction : ${transactions}">
                                    <td th:text="${transaction.date}"></td>
                                    <td th:text="${transaction.description}"></td>
                                    <td th:text="${transaction.amount}"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h3 class="section-title">Budget Overview</h3>
                        <p>Budget Status: <span th:text="${budgetStatus}"></span></p>
                        <p>Remaining Budget: <span th:text="${remainingBudget}"></span></p>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-body">
                        <h3 class="section-title">Savings Goals</h3>
                        <ul class="list-group savings-goals-list">
                            <li th:each="goal : ${savingsGoals}" class="list-group-item">
                                <span th:text="${goal.goalName}"></span>: <span th:text="${goal.amount}"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
styles.css:
/* Reset default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styles */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa; /* Light grey background */
    color: #495057; /* Dark text color */
    line-height: 1.6;
}

/* Navigation Bar */
.navbar {
    background-color: #ffffff; /* White background */
    border-bottom: 1px solid #dee2e6; /* Light border bottom */
}

.navbar-brand {
    font-weight: bold;
    color: #007bff; /* Blue text */
}

.navbar-nav .nav-item .nav-link {
    color: #6c757d; /* Medium grey text */
    font-weight: bold;
    transition: color 0.3s;
}

.navbar-nav .nav-item .nav-link:hover {
    color: #0056b3; /* Darker blue text on hover */
}

/* Main Content */
.page-content {
    padding: 20px;
}

.welcome-message {
    font-size: 24px;
    margin-bottom: 20px;
}

.section-title {
    font-size: 20px;
    margin-bottom: 15px;
}

.card {
    border: none;
    border-radius: 8px;
    background-color: #ffffff; /* White background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.card-body {
    padding: 20px;
}

.transactions-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.transactions-table th,
.transactions-table td {
    padding: 12px;
    text-align: center; /* Center-align table text */
    border-bottom: 1px solid #dee2e6; /* Light grey border bottom */
}

.transactions-table th {
    background-color: #007bff; /* Blue header background */
    color: #ffffff; /* White text */
}

.transactions-table tbody tr:nth-child(even) {
    background-color: #f8f9fa; /* Light grey alternating rows */
}

.list-group-item {
    border: none;
    background-color: inherit; /* Inherit background color */
}

/* Buttons */
.btn {
    display: inline-block;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: #007bff; /* Blue background */
    border: 1px solid transparent;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.btn:hover {
    background-color: #0056b3; /* Darker blue background on hover */
}

.btn-primary {
    background-color: #007bff; /* Blue background */
    border-color: #007bff; /* Blue border */
}

.btn-primary:hover {
    background-color: #0056b3; /* Darker blue background on hover */
    border-color: #0056b3; /* Darker blue border on hover */
}

/* Form Inputs */
.form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.form-control:focus {
    color: #495057;
    background-color: #ffffff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .navbar-nav {
        flex-direction: column;
    }
    .navbar-nav .nav-item {
        margin-bottom: 10px;
    }
}