我想为网站创建一个菜单，就像下面的图片一样在左边。但是，当我编写代码并应用样式时，它不能正确显示，最终像图片的右边一样。可能是什么问题？enter image description here

style.css：

.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* height: var(--mobile-nav-height); */
  height: (var(--vh, 1vh) * 100);
  background-color: var(--primary-container);
  color: var(--on-background-variant);
  padding-block: 12px 16px;
  z-index: 4;
  box-shadow: var(--shadow-1);
}

字符集

index.html：

<nav class="mobile-nav" aria-label="primary">
      <ul class="navbar-list">
        <li class="nav-item">
          <a href="./recipes.html" class="nav-link">
            <span class="item-icon">
              <span class="material-symbols-outlined" aria-hidden="true">
                lunch_dining
              </span>
            </span>
            <span class="label-medium">Recipes</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" aria-current="true">
            <span class="item-icon">
              <span class="material-symbols-outlined" aria-hidden="true">
                home
              </span>
            </span>
            <span class="label-medium">Home</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="./saved-recipes.html" class="nav-link">
            <span class="item-icon">
              <span class="material-symbols-outlined" aria-hidden="true">
                book
              </span>
            </span>
            <span class="label-medium">Saved</span>
          </a>
        </li>
      </ul>
    </nav>

型
请指导我设置菜单。