How to prevent headings () from taking up more width than they need?

You can give it display: inline. This will make it behave like any text element – the default for <h1> is display: block.

There are other ways: float: left for example, but I find this the simplest and the one with the fewest side effects.

Note that you will then probably have to add a <br> to ensure a line break after the <h1>.