在调整窗口大小或在手机中打开网页时，网页的上方栏会混乱

Question

我想要像StackOverflow这样的上方栏。每当我调整页面大小时，它都会自动调整。但是在我的网站上，每当我调整窗口大小或在手机中打开它时，右上角的内容都会移动到下一行并混淆整个导航栏。我尝试了很多方法，但没有任何效果。

#search {
  position: relative;
  left: 15%;
}

#sign-in {
  position: relative;
  left: 32%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
}

#about {
  position: relative;
  left: 39%;
  font-size: 20px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#search-icon {
  position: relative;
  font-size: 30px;
  top: 5px;
}

input {
  height: 25px;
  width: 400px;
  font-size: 20px;
}

input::-webkit-input-placeholder {
  font-size: 15px;
  position: relative;
  left: 12px;
  font-style: italic;
  bottom: 1px;
}

#logo {
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: brown;
  position: relative;
  left: 3%;
}

#search-box {
  position: relative;
  bottom: 5px;
}

#arrow {
  position: relative;
  left: 39%;
  top: 7px;
}

#upperBar {
  background-color: rgb(233, 233, 233);
  top: 0;
  width: 100%;
  left: 0px;
  position: fixed;
  overflow: hidden;
}

<div id="upperBar">
  <h1>
    <span id="logo">HSmedic</span>
    <span id="search">
      <input id="search-box" placeholder="search questions, books or profiles">
    </span>
    <span id="sign-in">Sign In</span>
    <span id="about">About</span>
  </h1>
</div>