Inline-flex centering and gap issue

Question

I want to center two divs with display: inline-flex; inside a block container, but somehow align-items: center; and justify-content: center; doesn't work. Only text-align: center; works, but it shouldn't be like that (because I've read that with display: inline-flex; it should be align-items and justify-content) I guess? If my solution is correct, then can you tell me what's the difference?

Also, I want to get rid of that little gap between these two centered divs, but I've tried some solutions from the internet and none of them works. Why?

I'd be glad if you guys could help me out with both of my questions.

Here's the code example:

.parent {
  border: 1px solid blue;
  background-color: yellow;
  padding: 10px;
}

.container {
  border: 1px dotted green;
  padding: 10px;
  text-align: center;
}

.child, .child2 {
  display: inline-flex;
  border: 1px solid red;
  background-color: honeydew;
  padding: 50px;
}

<div class="parent">
  <div class="container">
    <div class="child">
      <h1> Test1.</h1>
    </div>
    <div class="child2">
      <h1> Test2.</h1>
    </div>
  </div>
</div>

Answer 1

It will work if you use display: flex on container element. align-items and justify-content position flex items inside flex-container so you need to set display: flex on parent element.

.parent {
  border: 1px solid blue;
  background-color: yellow;
  padding: 10px;
}
.container {
  border: 1px dotted green;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.child,
.child2 {
  display: inline-flex;
  border: 1px solid red;
  background-color: honeydew;
  padding: 50px;
}

<div class="parent">
  <div class="container">
    <div class="child">
      <h1> Test1.</h1>
    </div>
    <div class="child2">
      <h1> Test2.</h1>
    </div>
  </div>
</div>