How to use CSS to reduce width of box around text

Hello,
I’m not very experienced with CSS, but have managed to figure out how to do most of the things I want with the site I’m launching. One thing I can’t figure out how to do is to reduce the width of this box (see screen shot at https://i.imgur.com/6aahF5n.png). What I’d love is for the box to be as wide as the text, with a little padding. Instead it seems to be full-width. Here’s the custom CSS I’m using. Thanks for any advice you might have!

.site-branding h1 {
  color: #a09a92;
  font-family: "Overpass";
  font-size: 36px;
  font-size: 3.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.site-branding a, .site-branding a:hover, .site-branding a:focus, .site-branding a:active {
    color: #ffffff
}

.menu-toggle .mobile-site-title {
  font-family: "Overpass"; background-color: #015138; border: 2px solid #ffffff;
border-radius: 6px; padding: 8px
}

.entry-meta {font-family: "Overpass"; font-style:normal; background-color: #015138; border: 2px solid #ffffff;
border-radius: 6px; padding: 2px}

.entry-header .entry-meta:before,
.entry-header .entry-meta:after,
.title-block .entry-meta:before,
.title-block .entry-meta:after {
  color: #d9d6d0;
  content: "";
  display: inline-block;
  font-family: libretto-icons;
  font-size: 24px;
  margin: 0 0.25rem;
  text-shadow: none;
  vertical-align: -6px;
}

The page I need help with: [log in to see the link]