見出し（<h1>）が必要以上の幅を占めるのを防ぐにはどうすればよいですか？
<h1>のような見出しを定義すると、その幅はデフォルトで100％に設定されます。
その幅が可能な限り最小の値に設定されていることを確認する方法はありますか？
display: inlineを与えることができます。これにより、他のテキスト要素と同じように動作します。<h1>のデフォルトはdisplay: blockです。
他にも方法があります。たとえば、float: leftですが、これが最も単純で、副作用が最も少ない方法だと思います。
次に、<br>の後に改行を確保するために、おそらく<h1>を追加する必要があることに注意してください。
の代わりに display: inline、 それを与える display: inline-block。これにより、幅が100％であることを除いて、h1タグのブロックのような品質が維持されます。
これはブロックレベルの要素であるため、display:blockのルールに従います。 display:inlineを設定できます。これは、コンテキストに応じて、必要なことを実行する場合と実行しない場合があります。