lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter1Title

webLightPracticeChapter2Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

# Menu Container Style

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

```css title="Menu Container Style"
.navbar .nav-menu {
  display: flex;
  align-items: center;
  background: white;
}
```

`display: flex;` is used to arrange the elements horizontally.

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

With this setup, the menu list will be arranged horizontally and vertically centered.

<br />

## Menu Item Style

```css title="Menu Item Style"
.navbar .nav-link {
  margin: 0 16px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
}
```

Set `margin: 0 16px;` to space out the menu items.

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

The `margin` property can set values in the order of top, right, bottom, and left.

For example, `margin: 2px 4px 6px 8px;` sets margins for the top, right, bottom, and left in that order. 

If this is confusing, you can also use the individual properties `margin-top`, `margin-bottom`, `margin-left`, `margin-right`.

Set the font size for the menu items with `font-size: 14px;`.

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

`var(--weight-semibold);` uses a variable named `--weight-semibold`, which references a predefined `font-weight` value.