CSS mismatch in Firefox and Chrome alignment

Question

I’m failing to leave the same image alignment pattern Hallo-top_fd2.png in the Chrome navigator, where I’m missing?

Grateful

#container {
  display: table-row-group;
  position: relative;
  align-items: center;
  right: -34px;
}

#container figcaption {
  position: absolute;
  top: 70px;
  right: 185px;
  font-size: 60px;
  color: #FFF;
  text-shadow: 2px 2px 4px black;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
}

<figure id="container">
  <img src="img/hallo-top_fd2.png" />  
  <figcaption>FUNDAMENTAL II</figcaption>
</figure>

Firefox

Chrome

Answer 1

Basically the problem is that the user-agent of Chrome does not recognize position: relative in an element with display: table-row-group;. Note that in the Tab Computed of Devtools, the element even picks up the style of right: -34px, but the position continues as static, the user-agent does not let change it, thus the child element with positino: absolute is not relative to the father, because the position: relative of the father who is with display: table-row-group; is not being applied in the end...

This is the explanation of the problem. Now on the solution the suggestion is to take that display: table-row-group; of the parent container, because honestly, it doesn’t make any sense to use a display of <tbody> in a <div>. Try to use flex or grid that you’ll do better.