Flexbox for Space Distribution in a Navigation Bar

.navbar {
  display: flex;
  justify-content: space-between; /* Distributes items with space between */
  align-items: center; /* Vertically centers items */
  gap: 15px; /* Adds space between items, newer alternative to margin */
  background-color: #333;
  padding: 10px 20px;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.navbar a:hover {
  background-color: #555;
}

How it works: This snippet uses Flexbox to create a responsive navigation bar where items are evenly distributed. `display: flex` turns the container into a flex container. `justify-content: space-between` pushes the first item to the start and the last item to the end, with equal space distributed between the other items. `align-items: center` vertically aligns all items in the middle of the container. The `gap` property provides consistent spacing between flex items without needing to manage margins on individual items, which can be simpler and more predictable.