Моя панель навигации показывает проблемы, которые я никогда не видел

Question

Как вы читали в заголовке, я пытался создать панель навигации, но у меня возникло несколько проблем, с которыми я раньше не сталкивался. Я даже составил список:

1. Кнопки, вставленные в панель навигации, даже если они не принадлежат классу div.

Панель навигации

Хорошо, теперь я видел это раньше, но я немного заржавел на HTML и не совсем помню, как это исправить. Если вы не можете сказать, ссылки не выровнены с текстом / lo go. Как я могу это исправить? Я пытаюсь сделать его стройным.

background-color: #252036;

}
#navigation-container {
  width: 1200px;
  margin: 0 auto;
  height: 70%;
}
.navigation-bar {
  background-color: #1c172c;
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
  text-align: right;
}
.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: right;
  display: inline-block;
  vertical-align: top;
}
.navigation-bar li {
  list-style-type: none;
  padding: 0px;
  display: inline;
  text-align: right;
}
.navigation-bar li a {
  color: black;
  font-size: 16px;
  font-family: basic;
  text-decoration: none;
  line-height: 70px;
  padding: 5px 15px;
  opacity: 0.7;
}
#menu {
  float: right;
}

<div class="navigation-bar">
  <div id="navigation-container">
    <h1>SINUS</h1>
    <ul>
      <li><a href="#">Home</a></li>
    </ul>
  </div>
</div>
<button>Download</button>

Answer 1

1. Это залипание из-за position: fixed;. Кнопка не видит .navigation-bar. Добавьте отступ к родителю, который содержит эти элементы.
2. h1 должен иметь display:inline-block;. ul сейчас чуть ниже h1.