我似乎无法正确居中我的导航栏

Question

我目前正在为我的个人网站创建一个导航栏，在使其在移动设备上看起来不错的过程中，我似乎无法将导航栏正确居中。无论我做什么它都会向右倾斜。

这是我的导航栏代码。我尝试过 margin 和 padding 属性，但它们在 @media 属性内根本没有影响。我之前也用 Flexbox 制作过导航栏，但遇到了同样的问题，它向右倾斜。我已将 @media 属性内的显示更改为 flex，它也向右倾斜，边距和填充都不会影响它。

.navbar {
  padding: 1px 2px;
  border: 4px double;
  justify-content: center;
  margin-left: 43%;
  margin-right: 43%;
  border-radius: 8px;
  background-color: rgba(19, 19, 22, 0.7);
  border-color: white;
}

.navbar ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;
  margin: 3px 13px;
}

@media (max-width: 500px) {
  .navbar {
    width: fit-content;
  }
  .navbar ul {
    text-align: center;
  }
}

<nav class="navbar">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contacts.html">Contacts</a></li>
  </ul>
</nav>

在我的@media中，我有“width：fit-content”属性，但是如果我删除它，它不再向右倾斜，但文本与边框重叠。

Answer 1

删除导航栏上的边距。将以下内容放在导航栏的父级上：

  display: flex;
  justify-content:center;
  align-items:center;