Menu Container Style

To arrange the menu list horizontally, set display: flex;.

Copy
.navbar .nav-menu {
  display: flex;
  align-items: center;
  background: white;
}

display: flex; is used to lay out elements horizontally.

align-items: center; is used to vertically center the elements.

This configuration arranges the menu list horizontally and centers it vertically.

Copy
.navbar .nav-link {
  margin: 0 16px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
}

To provide spacing between menu items, set margin: 0 16px;.

margin: 0 16px; sets the top and bottom margins to 0, and the left and right margins to 16px.

The margin property allows you to set values in the order of top, right, bottom, and left.

For instance, margin: 2px 4px 6px 8px; is set in the top, right, bottom, and left order.

If you're uncertain, you can use margin-top, margin-bottom, margin-left, and margin-right separately.

To set the font size of the menu items, use font-size: 14px;.

font-weight: var(--weight-semibold); sets the weight of the text.

var(--weight-semibold); refers to a pre-defined variable, --weight-semibold, which references a specific font-weight value.