I would like to make the widget title background a color, but the background goes the whole width of the widget. How would I make the background only be the width of the text, with a little space on each end? My idea is to have a background image along the top of the widget then have a background color for the text to separate it from the background image.

Change the width from 33% to auto. That will get rid of the extra background area that extends beyond the text.

Add background-color: #123456; to change the background color behind the text, replacing 123456 with the hex code for the color you want to use.

Change the padding to padding: 12px 10px; padding: 1.2rem 1rem; so that the background color extends just a bit beyond the text.

Do you need a background image, or do you just want the top to have a border in a different color? The border will be easier to implement. Add border-top: 5px solid #123456;, replacing 123456 with the hex code for the color you want for the top border. Increase/decrease the 5px to make the border larger or smaller.