How to Set a Background-Color For the Width of Text, Not the Width of the Entire Element, Using Css

How do I set a background-color for the width of text, not the width of the entire element, using CSS?

Put the text in an inline element, such as a <span>.

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

And then apply the background color on the inline element.

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

An inline element is as big as its contents is, so that should do it for you.

The background color isn't stretching the entire width of screen

Wrapping your container with the section will most likely fix the problem.

Instead of writing this;

<section class="about container py-5 my-5 mx-auto">

try this:

<section class="about py-5 my-5">
  <div class="container mx-auto">

You probably have a margin set around your container

Also your about styles should be set to width: 100%

Apply background color to the width of the text and center it

Try the below code (using flexbox):

.order {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.order h3 {
  font-family: Raleway;
  color: white;
  background-color: blue;
}

.order h1 {
  font-family: Raleway;
  background-color: blue;
}

<div class="order">
    <h3>Hello world</h3>
    <h1>How are you doing</h1>
</div>

how to make background fit content and not full width of container in bootstrap

The default behavior of a <div> is to be a block-level element, which means that it will always take 100% of the available width unless this behavior is overridden. There are a couple of different approaches you could take to resolve this, either change the nature of your <div> wrapper, or eliminate that entirely and apply the changes to your anchor tag.

Below is an example of what the former might look like using Bootstrap 4 and as few custom styles as possible.

.myPill a {
  background: #d3d3d3;
}

.myPill img {
  max-width: 50px;
}

<div class="myPill d-flex-inline text-center">
  <a href="#null" class="d-inline-block rounded-pill px-3 py-2">
    <img class="img-fluid rounded-circle" src="https://lh3.googleusercontent.com/a-/AOh14Gj07ovBA5rvPW7w90kJll5j3_oqFbc1hpADM4F91w" />
    <span class="ml-2">User</span>
  </a>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

How to make background-color only cover the size of element?

Use width: fit-content and it will have the width of what is inside of the element.

.container {
  background-color: yellow;
  width: fit-content;
}

<div class="container"> random text </div>