H1 Background-color Property Fills The Whole Line

I currently have a text-align: center; h1 element. It also has a background-color: #000506;. The current issue is that this background color fills the whole line as shown here: Wh

Solution 1:

you can reset display to use the table-layout model so it will shrink to fit content.

example

h1 {
  display: table;
  margin: auto;
  
  /* extra style */border-radius: 1em;
  background: #333;
  color: #eee;
  padding: 00.5em;
  line-height:1em;
}

<h1>Sheet List</h1>

---

theoraticly and very soon, display won't be needed, width and margin:auto will do fine when max-content will be widely implemented.

h1 {
  width:max-content;
  margin: auto;
  
  /* extra style */border-radius: 1em;
  background: #333;
  color: #eee;
  padding: 00.5em;
  line-height:1em;
}

<h1>Sheet List</h1>

https://developer.mozilla.org/en-US/docs/Web/CSS/width#fill

max-content

The intrinsic preferred width.