cssのセレクタが合わない問題

spanでできた横棒ハンバーガーメニュー)を3個とも新たに作成したhamburgerというクラスに収納したのですが検証で見るとhamburgerには入っておらず最初はheightやwidthが指定されていないからデタラメな場所にhamburgerの判定があるのかと考えましたがそれらをきちんと作成してもhamburgerに入っているはずのspanの横棒が別の位置に配置されてしまいます。
検証で何度も新たな疑問を自力で解決してきたのですがこちらに関しては全く解決できません。
なぜ検証で見るとクラスの判定が別の位置にずれてしまうのでしょうか？

わかるかた是非よろしくお願いします。

コードindex.html.erbです。
<header>
  <div class="box">
    <div class="first-message">
      <p>SwapApp</p>
      <!-- ハンバーガーメニューのアイコン -->
      <div class="hamburger" id="hamburger">
        <!-- 1番上の線 -->
        <span class="inner_line" id="line1"></span>
        <!-- 真ん中の線 -->
        <span class="inner_line" id="line2"></span>

        <!-- 1番下の線 -->
        <span class="inner_line" id="line3"></span>
      </div>
    </div>
    <!-- ナビメニュー -->
    <nav id="nav">
      <ul>
        <li><a href="#">SUMPLE1</a></li>
        <li><a href="#">SUMPLE2</a></li>
        <li><a href="#">SUMPLE3</a></li>
      </ul>
    </nav>
    <% if user_signed_in? %>
    <div class="message">
      <%= "#{current_user.nickname} is already logged in." %>
      <%= link_to "Logout", destroy_user_session_path, method: :delete %>
    </div>
    <%= link_to root_path do %>
    <% image_tag 'note-pencil.jpeg' ,class: "link-category1"%>
    <% end %>

    <% else %>
    <div class="message-container">
      <div class="message1">
        <%= link_to "Create your account!", new_user_registration_path %>
      </div>
      <div class="message2">
        <%= link_to "Login", new_user_session_path %>
      </div>
    </div>
  </div>
  <% end %>
  <div class="hero-image">
  </div>
  </div>
</header>
<h1>aaa</h1>
<%#= link_to root_path do %>
<%#= image_tag '' ,class: "link-category1"%>

index.cssのコードです。

コード.box {
  margin:15px 0 0 0;
  position: relative;
}

header{
  z-index:1;
  width:100%;
  height:20vh;
}

body{
  background: #b4ada9;
  color: #505962;
  margin:0;
  /*background-image: url("/for-swapapp.jpg");*/
  height:100%;
  background-size:cover;
  background-repeat:no-repeat;
}

.test {
  height:1000px;
}

h1 {
  margin:1000px 0;
}

.hero-image {
  z-index:0;
  position: absolute;
  background-image:url("for-swapapp.jpg");
  width: 100vw;
  height: 130vh;
  background-size:cover;
  background-repeat:no-repeat;
}

.first-message {
position:relative;
width:200px;
display:contents;
}
.first-message p{
  margin:0;
  font-family: 'Noto Sans JP', メイリオ;
  font-size:1.5rem;
  height:70px;
  text-align:center;
}

.message-container {
  z-index:1;
  height:30px;
  width:200px;
display:contents;
  justify-content: flex-end;
  margin:0;
}

.condition{
 position:relative;
 display:flex-end;
}

.top-image-container {
    width: 100%; /*幅いっぱい!の時は100%*/
    height: 88vh;/*画面に対しての高さ*/
    background: url("for-swapapp.jpg") no-repeat center/cover;
    z-index:0;
}

#ul {
  z-index:9998;
}

/*以下javascript(サイドメニュー)*/

.message1 {
position:relative;
margin-right:1%;
text-align-last: end;
font-family: fantasy;
}
.message2 {
  position:relative;
  margin-right:2%;
  text-align-last: end;
  font-family: fantasy;
  }
.message1 a {
  text-decoration: none;
  color: #000000;
}

.message2 a {
  text-decoration: none;
  color: #000000;
}

h2 {
text-align-last: center;
}

.form-text-wrap {
  width: 100%;
  margin:0 auto;
}

.form-text-wrap select{
  display: flex;
  margin: 0 auto;
}

.input-birth-wrap p{
position :center;
}

.birthday{
  margin: 0 auto;
}

.actions {
  text-align: center;
  margin: 10px;
}

.icon-image1 {
width: 15%;
height: 15%;
}

.link-category1 {
  position:relative;
  width: 15%;
  height: 15%;
}

.top-image-container img{
 max-width:100%;
 width:85%;
 height: auto;
 /*max-height: 95%;*/
 object-fit: cover;
}

.trigger-container {
  width:100%;
  height:;
}

/*以下ハンバーガーメニューのcss*/

/*以下ナビメニュー*/
#nav{
  position: absolute;
 top: 0;
 z-index:3;
/*ナビメニューを左に隠した状態になる*/
  left: -40%;
  width: 40%;
  height: 100vh;
  background: #ffffff;
 /*０.7秒かけてナビメニューがスライドする*/
  transition: .7s;
}
#nav ul{
  padding-top: 80px;
}
#nav ul li{
  list-style-type: none;
  font-size: 20px;
}
#nav a{
  display: block;

  text-decoration: none;
  color: #000000;
  margin: 0 15px;
  padding: 10px;
  transition: .5s;
}
#nav li a:hover{
  color: #ffffff;
  background: #cd5c5c;
  border-bottom: none;
}

.hamburger {
  width:150px;
  height:100px;
  display:inline-block;
}

/*ハンバーガーメニューのアイコン*/
.hamburger span {
  z-index: 4;
  display: block;
  height:100px;
  width:100px;
  height:1vh;
  margin-left: 30px;
  cursor: pointer;
  transition: 1s;
}

/*線の縦幅色など*/
.inner_line {
  display: block;
  position: absolute;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #ffffff;
  transition: 1s;
  border-radius: 4px;
}

/*ハンバーガーの横線*/
#line1 {
  top: 0;
}
#line2 {
  top: 20px;
}
#line3 {
  top: 40px;
}

/*ハンバーガーメニューの動き*/
.in{
  transform: translateX(100%);
}
.line_1,.line_2,.line_3{
  background: #000000;
}
.line_1 {
/*-45度回転させる*/
  transform: rotate(-45deg);
  top: 0;
}
.line_2 {
  opacity: 0;
}
.line_3 {
/*45度回転させる*/
  transform: rotate(45deg);
  bottom: 0;
}

position:relative;をhamburgerに追加したところうまく検証ではhamburger内に治ってくれました！しかし今度はposition:relative;の追加をするとコンテンツ内に存在する3個のspan要素が
密着してしまいます。

個人的にはこの問題は要素の配置を中央に寄せればいいのかな？とか考えたのですがその方法を考え中です。
せっかくアドバイスいただいたのに期待通りにできずすみません????‍♂️????