HTML/CSS - How can I center two divs that are `sticky` and `inline-block`?

I have the following code: JSFiddle. The title is a sticky element and everything works fine. However, I would like to center the title and icon, so I added a wrapper div: JSFiddle. The problem here is that the title is now sticky to the wrapper div instead of the content div. How can I make sure the positioning works while also having the title and icon centered?

Here's the code from the second JSFiddle:

HTML:

<div class="content">

  <div class="menu-wrapper">

    <div class="menu">

      <p class="menu-title">Title</p>

    </div>

    <img src="https://apixel.me/static/apixel.png" class="icon" />

  </div>

  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>

</div>

CSS:

.menu-wrapper {
  display: inline-block;
  border: thin red solid;
  margin-left: 50%;
  transform: translate(-50%, 0);
}

.menu {
  position: sticky;
  display: inline-block;
  width: 150px;
  top: 15px;
  background-color: #000000c7;
  border-radius: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 10px;
}

.menu-title {
  color: white;
  font-family: "Roboto";
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0px;
  margin-left: 15px;
}

.icon {
  display: inline-block;
  width: 50px;
  height: auto;
  margin-left: 50px;
}

Edit: I only want the title to be sticky, not the icon

Solution

You can just use regular text alignment to get your centering. Like this:

.content {
  text-align:center;
}
.content > * {
  text-align:left;
}

.menu {
  position: sticky;
  display: inline-block;
  width: 150px;
  top: 15px;
  background-color: #000000c7;
  border-radius: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 10px;
}

.menu-title {
  color: white;
  font-family: "Roboto";
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0px;
  margin-left: 15px;
}

.icon {
  display: inline-block;
  width: 50px;
  height: auto;
  margin-left: 50px;
}

<div class="content">



    <div class="menu">

      <p class="menu-title">Title</p>

    </div>

    <img src="https://apixel.me/static/apixel.png" class="icon" />



  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>

</div>