CSS display:inlineが効かない

Question

前提・実現したいこと

cssにて、h2（見出し）のみに[border-bottom]をつけたいのですが、
サイト画面横幅いっぱい、線が入ってしまいます。

↓このように、文字の下だけに、下線を引きたいです。

該当のソースコード

<main>
      <div id="main-visual">


      <img src="img/bicycle-789648_1920.jpg" alt="bicycle">

    </div>

<section id="About">
    <h2 class="section-title">ABOUT</h2>
    <div class="content">
    <img src="img/bicycle-1868162_640.jpg" alt="自己紹介">
    <div class="text">
      <h3>KAKERU MIYAICHI</h3>
      <p>
        "テキストテキストテキストテキストテキスト"
        <br>
        "テキストテキストテキストテキストテキスト"
        <br>
        "テキストテキストテキストテキストテキスト"
      </p>
    </div>


    </div>
</section>

<section id="Bicycle" class="wrapper">
    <h2 class="section-title">Bicycle</h2>
    <ul>
      <li><img src="img/bicycle-1872682_1920.jpg" alt="写真１">
        <h3>タイトル・タイトル</h3>
        <p>テキストテキストテキストテキスト</p>
      </li>
      <li><img src="img/sign-741813_1920.jpg" alt="写真１">
        <h3>タイトル・タイトル</h3>
        <p>テキストテキストテキストテキスト</p>
      </li>
      <li><img src="img/architecture-2562316_1920.jpg" alt="写真１">
        <h3>タイトル・タイトル</h3>
        <p>テキストテキストテキストテキスト</p>
      </li>
    </ul>
</section>


</main>

コード

@charset "UTF-8";
html {
  font-size: 100%;
}

body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #432;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}

body {
    color: #383e45;
    font-size: 0.9rem;
}

#main-visual img{
  height: 600px;
  width: 100%;
  object-fit: cover;
  max-width: 1920px;

}

.logo {
  width: 120px;
  margin-top: 10px;
}

.main-nav {
  display: flex;
  font-size: 14.4px;
  padding: 10px 0;


  list-style: none;

}

.main-nav li {
margin-left :30px;

}

.main-nav a {
  color: #24292e
}

.main-nav a:hover {
  color: #432;

}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  height: 60px;
}

.wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding:0 4%;
  text-align: center;

}



.content {
  display: flex;
  justify-content: center;

}



.content img {
  width:100px;
  height:100px;
  object-fit:cover;
  border-radius:50%;
  margin-right: 30px;
}

section ul li img {
  width: 270px;
  height:170px;
}


#Bicycle ul {
  display: flex;
  justify-content: space-between;
}

.section-title {
  font-size: 2rem;
  border-bottom: solid 1px #383e45;
　display: inline-block;
  text-align: center;
}

試したこと

h２は、「ブロック要素」のため、「display: inline-block;」を入れましたが、
サイトにソースを読み込むと、取り消し線が入っています。
サイト模写のため、模写しているサイトのコード通りinlineーblockを入れていますが、うまくいきません。

初歩的な質問で恐れ入りますがご教示いただけますと幸いです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[itagagaki]

たぶん質問に書かれたコードのほかに別のCSSコードを読み込んでいてそれが影響しているはずです。

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[mo-n]

コメント入れて下さった方ありがとうございました。コード追記とcode機能使用しました。

Answer 1

テキストに下線を引きたい場合は、borderではなくtext-decoration: underline;を使うのが適切かと思います。
text-decorationだけで実現したい見出しの下のみに下線を引くことができます。
他にも色を変えたりはもちろん、点線にしたり打ち消し線なんかもできますので詳細は参考リンクを見てください。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration

Comments

[mo-n]

ご回答ありがとうございます、元のサイトがborder-bottom使用していたので、このやり方が普通なのかなと思いましたが、シンプルに、下線でもよかったですね。ありがとうございました。

Answer 2

.section-title {
  font-size: 2rem;
  border-bottom: solid 1px #383e45;
　display: inline-block;
  text-align: center;
}

上記のコード拝見したところ、display:inline-block;の行だけ全角スペースが入っていたため、反映されていなかったようです。
cssの文法上、全角スペースが入っている場合反映しません。
参考：https://knowledge-base.site/web_creative/web_creative-332/#CSS-2

Comments

[mo-n]

ありがとうございます。初歩的なミスでした。全角直したら反映しました。

Answer 3

.section-titleにwidth: max-content;を加える。
text-align: center;にしているので、もしかして画面の左右中央にレイアウトしたいのなら、margin: auto;を加える。