ボーダーが２個できる？

備忘録としてアップします

チャットを終了するのボタンを作ろうとした際に、
ボーダーが２個できてしまうエラーが発生しました。

以下エラーのスクショ

以下問題のコード
HTML

main_chat.html.erb

<div class="main_chat_top">
  <div class="chat_summary">
    <div class="chat_summary_title">
    hogefuga
    </div>
  </div>
  <div class="chat_end">
    <div class="chat_end_button">
      <a href="">チャットを終了する</a>
    </div>
  </div>
</div>
<div class="main_chat_middle">
</div>
<div class="main_chat_bottom">
</div>

CSS

.wrapper{
  display: flex;
}
.side_bar {
  width: 300px;
  height: 100vh;
}
.side_bar_top{
  height: 100px;
  padding: 0 20px;
  background-color: #253241;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user_name a{
  font-size: 16px;
  color: #FAFAFA;
  text-decoration: none;
}
.chat_make a{
  text-decoration: none;
  padding: 14px;
  border: 1px solid lightblue;
  font-size: 10px;
  color: deepskyblue;
}
.side_bar_bottom{
  height: calc(100vh - 100px);
  background-color: #2f3e51;
  padding: 0 20px;
}
.chat_list{
  padding: 20px 0 40px;
}
.chat_list a{
  color: white;
  text-decoration: none;
}
/* ---------------以下メインチャット--------------- */
.main_chat{
  width: calc(100vw - 300px);
  height: 100vh;
  background-color: #ffffff;
}
/* main_chat_top */
.main_chat_top{
  height: 100px;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
}
.chat_summary_title{
  padding-top: 36px;
  font-size: 24px;
  color: #333;
}
.chat_end_button{
  margin-top: 40px;
}
.chat_end_button a{
  text-decoration: none;
  border: 1px solid darkred;
  padding: 20px;
  color: darkred;
}
/* .main_chat_middle */
.main_chat_middle{
  height: calc(100vh - 100px - 90px);
  background-color: #fafafa;
  padding-top: 46px 40px 0;
}
/* .main_chat_bottom */
.main_chat_bottom{
  height: 90px;
  background-color: #dddddd;
  padding: 20px 40px;
}

以上、コードの

div class="cat_end_button"

内の

<a href="">チャットを終了する</a>

にCSSでボーダーを指定したら、当該ボーダーの左に別のボーダーが生成されてしまします。

■仮説と検証

1.コードの間違い？
→確認しましたがおそらく問題はないと思います。

2.別のdivが生成されたのではないか？
→61行目

.chat_end_button a{
  text-decoration: none;
  border: 1px solid darkred;
  padding: 20px;
  color: darkred;
}

内に background-color：red:で色をつけたところ、
エラーのボーダー含めて赤くなりましたので、div要素は1つと思われます。

結果
本ページはrenderを用いて、サイドバーとメインチャットのファイルを分けてindex.html.erbで読み込んでおりました。

index.htm.erb

<div class="wrapper">
  <div class= "side_bar">
    <%= render "side_bar" %>
  </div>
  <div class= "main_chat">
    <%= render "main_chat" %>
  </div>
</div>


<div><div class="side_bar_top">
  <div class="user_name">
    <a href="">Tom</a>
  </div>
  <div  class="chat_make">
    <a href="">チャットを作成する</a>
  </div>
</div>
<div class="side_bar_bottom">
  <div class=chat_list>
    <a href="">techroom1</a>
  </div>
  <div class=chat_list>
    <a href="">techroom2<a> 
  </div>
</div>

問題は先に読み込んだサイドバーのaタグが閉じられていないことでした。

side_bar.html.erb

<div class="side_bar_top">
  <div class="user_name">
    <a href="">Tom</a>
  </div>
  <div  class="chat_make">
    <a href="">チャットを作成する</a>
  </div>
</div>
<div class="side_bar_bottom">
  <div class=chat_list>
    <a href="">techroom1</a>
  </div>
  <div class=chat_list>
    <a href="">techroom2<a> <%＃ ←ここに　/　の忘れが原因 %>
  </div>
</div>

閉じられていないことで、index.htm.erbの　/aに影響し、ボーダーが生成されたようでした。

別のファイルが影響を及ぼすことがありますので、参考になればと思います。