CSS Flexbox Layout

1.flex-container {
2  display: flex;
3  flex-direction: row; /* Main axis is horizontal */
4  justify-content: center; /* Centered along main axis */
5  align-items: center;    /* Centered along cross axis */
6}

1.navbar {
2  display: flex;
3  justify-content: space-between;
4  align-items: center;
5  padding: 1rem 2rem;
6  gap: 1.5rem;
7}

1.sidebar {
2  flex: 0 0 250px; /* Fixed 250px width, no growing, no shrinking */
3}
4 
5.main-content {
6  flex: 1 1 auto; /* Takes up all remaining flexible space */
7}
8 
9.featured-badge {
10  align-self: flex-start; /* Aligns to top even if parent aligns center */
11}

1/* Perfect Centering */
2.hero-modal {
3  display: flex;
4  justify-content: center;
5  align-items: center;
6  min-height: 100vh;
7}
8 
9/* Card with pinned bottom button */
10.card {
11  display: flex;
12  flex-direction: column;
13}
14.card-body {
15  flex: 1; /* Pushes button down */
16}