.nav-bar {
    display: flex; /* This will lay out the children (nav links) in a row */
    align-items: center; /* This will vertically center the nav links */
    justify-content: start; /* This aligns the nav links to the start of the container */
    padding: 8px;
    background-color: #f8f9fa; /* Example background color */
    border-bottom: 1px solid #dee2e6; /* Example bottom border for the navbar */
}

.nav-link {
    display: inline-block; /* Treats each link like an inline element that respects padding and margins */
    text-decoration: none;
    color: #007bff; /* Blue color for links */
    padding: 8px 16px; /* Padding around the text */
    margin-right: 8px; /* Right margin for spacing between links */
    border-radius: 4px; /* Rounded corners */
}

    .nav-link.active {
        color: #fff; /* White text for the active link */
        background-color: #007bff; /* Blue background for the active link */
        border-color: #007bff; /* Blue border for the active link */
    }