```css
.main-heading {
  display: block;
  font-family: "Josefin-Sans", sans-serif;
  font-size: 70.6px;
  font-weight: bold;
  text-align: center;
  color: #ba9a45;
}

.subheading {
  font-family: "Cardo", sans-serif;
  font-size: 23.5px;
  text-align: center;
  color: #fff;
  padding-top: 30px;
}
```

```html
<!-- Headings -->

<div>
  <h1 class="main-heading">ATLANTIC</h1>
  <h1 class="main-heading">CASINO</h1>
  <h3 class="subheading">FEED YOUR DESIRES</h3>
</div>
```

I seem to not be able to make my **h1** and **h3** background only as wide as the text and not span the **whole width** of the line.

How can I reduce the background of the **h1** and **h3** so it only spans to the end of the text?

--

I've managed to resolve my issue by taking into consideration all the advice given by users below.

Have a look at my revised code which works:

```
<div class="title-headings">
  <h1 class="main-heading">ATLANTIC</h1>
  <h1 class="main-heading">CASINO</h1>
  <h3 class="subheading">FEED YOUR DESIRES</h3>
</div>

.main-heading{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  font-family: "Josefin-Sans", sans-serif;
  font-size: 70.6px;
  font-weight: bold;
  color: #ba9a45;
}

.subheading{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  font-family: "Cardo", sans-serif;
  font-size: 23.5px;
  color: #fff;
  padding-top: 30px;
}

```