Image
正如你所看到的，当我添加行星元素或按钮，“太阳系18413”文本不对齐在中心，即使我编程它是在中心。
Image
看看当我添加更多的文本时会发生什么，它只是推送H1文本，有什么解决办法吗？

h1 {
  font-size: 50px;
  text-align: center;
}
.navigation {
  float: left;
  font-weight: bold;
  display: table;
  border-radius: 5px;
  background-color: #dad9d9;
}

.planet {
  position: relative;
  vertical-align: top;
  display: flex;
}

    <div class="navigation">
      <a href="#planets" ; class="planet">Planets</a>
    </div>

    <h1>Solar System 18413</h1>

我希望它是在H1文本是在中心和按钮是在左边没有相互冲突的位置