Css 如何在flexbox中水平对齐项目？

我正在尝试制作一个非常简单的导航菜单，所有链接都在一行中，间隔均匀。 我把它们放在一个flexbox中，它提供了很好的对齐效果，但是所有元素都拒绝水平排列。 这是我的密码：

    #inline {
  display: flex;
  border: solid 1px grey;
  justify-content: space-between;
  align-items: center;
}
#inline div {
  height: 0%;
  display: inline-block;
}
.smlBox {
  background-color: #eeeeee;
  font-family: Century Gothic, sans-serif;
  font-size: .9em;
  margin: 17px 0px 17px 0px;
  border-radius: 5px;
  padding: 7px 17px 7px 17px;
}

#inline应用于父容器，而.smlBox应用于每个nav元素，它只是一个包含超链接的div。 这就是我得到的：

有人能建议如何使这些元素真正对齐吗？其他对齐项选项也没有帮助。 下面是HTML标记，很抱歉之前没有包括它：

<div id="inline">
          <div class="smlBox" style="background-color: #2997d6;"><a href="#pricing" style="color:#1075b0;color:white"><strong>Register Now!</strong></a></div>
  <div class="smlBox" style="background-color: #2997d6;"><a href="#audience" style="color:#1075b0;color:white"><strong>Audience and Benefits</strong></a></div>
  <div class="smlBox" style="background-color: #2997d6;"><a href="#inspired" style="color:#1075b0;color:white"><strong>Why Inspired?</strong></a></div>
    <div class="smlBox" style="background-color: #2997d6;"><a href="#coverage" style="color:#1075b0;color:white"><strong>Typical Coverage</strong></a></div>
      <div class="smlBox" style="background-color: #2997d6;"><a href="#contact" style="color:#1075b0;color:white"><strong>Contact Us</strong></a></div></div>

---

我知道这很混乱，但我正在处理SquareSpace，这对于处理降价块中的样式和类来说是一个巨大的痛苦。

你想这样吗？（请全屏查看）

#内联{
显示：表格；
边框：实心1px灰色；
宽度：100%；
}
#内联div{
显示器：flex；
对齐项目：居中；
对正内容：空间均匀；
}
.smlBox{
背景色：#eeeeee；
字体系列：世纪哥特式，无衬线；
字体大小：.9em；
保证金：17px 0px 17px 0px；
边界半径：5px；
填充：7px 17px 7px 17px；
}

现在注册！
受众和利益
为什么会有灵感？
类型覆盖率
联系我们

您是否尝试过弯曲方向：行？另外，您是否可以共享您的标记，以便我们可以添加代码片段？您是否可以将HTML添加到您的问题中？你的CSS和描述都很好。由于导航中的文本，html顺序或父容器的宽度与元素的宽度可能有问题-Divs@WaliWaqar flex direction:row是初始值，因此只要没有指定其他方向，就不会导致任何问题。请参见此处：Hi此处。是的，如果我不能弄清楚flexbox的问题，我正在考虑表格布局。谢谢你的建议