How to prevent headings (<h1>) from taking up more width than they need?
Instead of display: inline
, give it display: inline-block
. This will retain the block-like qualities of the h1 tag, except for the 100% width.
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>
.