Html 如何使所有导航链接看起来相同？

我想让in屏幕截图中显示的导航链接周围都有相同的填充，不管我的教授说的关于justify的文本长度如何，我不记得到底是什么。此外，我想让菜单只拉伸到一定的宽度，之后它应该保持相同的大小

显示第一个链接上填充问题的导航链接：

这是导航链接的html：

<nav id="navigation">
  <ul>
    <li><a id="nav-intro" href="#introduction">Introduction</a></li>
    <li><a id="nav-cont" href="#content">My Shoes</a></li>
    <li><a id="nav-loc" href="locations">Where I buy from</a></li>
    <li><a id="nav-care" href="care">Proper Care</a></li>
  </ul>
</nav>

以下是我的导航链接的媒体查询：

<nav id="navigation">
  <ul>
    <li><a id="nav-intro" href="#introduction">Introduction</a></li>
    <li><a id="nav-cont" href="#content">My Shoes</a></li>
    <li><a id="nav-loc" href="locations">Where I buy from</a></li>
    <li><a id="nav-care" href="care">Proper Care</a></li>
  </ul>
</nav>

@媒体屏幕和最小宽度：484px{ 导航ul{ 显示器：flex； 证明内容：中心； 保证金：0-0.25em； } 李国荣{ 柔性生长：1； 边缘：0.25微米； 左侧填充：0.333em； 右侧填充：0.333em； }

---

这是一个学校项目，我只需要使用CSS来编辑所有内容的外观。我想继续使用flexbox，而不做任何更改。

我能够想到这一点，但它只是稍微扩展了框

导航a{ 背景色：280e0e； 边界半径：15px； 颜色：C70039； 显示：块； 字号：1.25em； 垫底：0.444em； 垫面：0.444em； 对齐：居中； 文字装饰：无； 最大宽度：18.889em； 高度：40px； } 李国荣{ 文本对齐：居中； 填充底部：11px； } 保险商实验室{ 列表样式类型：无； 保证金：0； 填充底部：0； } @媒体屏幕和最小宽度：484px{ 导航ul{ 显示器：flex； 证明内容：中心； 保证金：0-0.25em； } 李国荣{ 柔性生长：1； 边缘：0.25微米； 左侧填充：0.333em； 右侧填充：0.333em； } } 导航菜单 保险商实验室{ 列表样式类型：无； 保证金：0； 填充底部：0； 显示器：flex； } 李国荣{ 文本对齐：居中； 填充底部：11px； 利润率：10px 10px； } 导航a{ 背景色：280e0e； 边界半径：15px； 颜色：C70039； 显示：块； 断字：正常； 空白：预处理； 字号：1.25em； 垫底：0.444em； 垫面：0.444em； 文本对齐：居中； 文字装饰：无； 最大宽度：18.889em； 左侧填充：15px； 右侧填充：15px； }

---

@为了达到这个目的，你必须相应地调整填充和边距。我做了一些编辑，这里是链接。