タイトルのしたのサブタイトルを中央揃えにして左寄せにするには？

Question

前提・実現したいこと

初めて質問させていただきます。よろしくお願いいたします。

中央揃えした文字を左寄せにしたいです。
例えば、ホームページのコンテンツタイトルなどで

Company
会社概要

といったもので、下のサブタイトル（今回で言う会社概要）がタイトルと中央揃えになっていて、それを左寄せにしたいと言うことです。

該当のソースコード

<div class="title">
<h1>Company</h1>
<p>会社概要<p/>
</div>

<div class="title">
<h1>Service</h1>
<p>サービス<p/>
</div>

.title {
  width: 10%;
}

.title h1 {
  margin-bottom: 0;
}

.title p {
  text-align: center;
}

試したこと

上記のコードでぱっと見はそれっぽくなるのですが、
タイトルの長さによって中央揃えになりません。
クラス名をタイトルごとに付ければ、なんとかできるのかと思うのですが・・・

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

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

Comments

[K_3578]

質問の意図がわからないんですけど、
Company
会社概要
を画面左に寄せた上で会社概要をCompanyに対して中央揃えしたいって事であってますか？

[yunoco_55]

説明が下手で申し訳ございません。
おっしゃる通りです。

[K_3578]

確かにご提示のコードだと微妙にずれますね。
ちょっとやってみます。

というか、既にLhankor_mhyさんが回答してくれてますね。
それぞれを<h1>に対して中央揃えする、という目的なら達成されていると思います。

[yunoco_55]

K＿3578さん
この質問を見てくださりありがとうございました！
おかげさまで、解決ができました。

[K_3578]

私は何もしてないので感謝はLhankor_mhyさんにどうぞ。

Answer 1

こうでしょうか。

.title {
  /*width: 10%; 削除*/
  width: max-content;
}

Comments

[yunoco_55]

早速ありがとうございます。
やってみたらできました。
max-contentという値があるのは知らなかったです！
ずっと悩んでいたので、大変助かりました。