How do I center text in div with fixed width?

I am trying to center text within a div with a set width. I don't set the width the text centers if I do it doesn't. I need to set the width because it affects the size of the larger container and I want the containers to be the same size.

I have tried putting a wrapper on it and setting the left and right margins to auto. I've tried that on it directly. I've tried text-align: center on it and on a wrapper.

HTML

<div class = "br2 flex flex-row flex-wrap">
  <div class="u-all-out"> 
                      <a class = " flex br5 bg-yellow shadow-1 center flex-col hover-bblue grow hover-ul u-all-in" href="">
                          <div class = "flex">
                              <img class="xbig-icon br5 mb2" id = "train_img_1">
                          </div>
                          <h4 class =" dark-gray items-center hover-bblue w-train-desc" id = "train_title_1"> Here is something</h4>
                          <h6 class ="flex bright-blue items-center hover-bblue rm-mb rm-mt italic hover-ul">Start here</h6>
                      </a>
                  </div>
  <div class="u-all-out">
                    <a class = " flex br5 bg-yellow shadow-1 center flex-col hover-bblue grow hover-ul u-all-in" href="">
                        <div class = "flex">
                            <img class="xbig-icon br5 mb2" id = "train_img_2">
                        </div>
                        <h4 class ="dark-gray items-center hover-bblue w-train-desc" id = "train_title_2"> Here is another</h4>
                        <h6 class ="flex bright-blue items-center hover-bblue rm-mb rm-mt italic hover-ul">Start here</h6>
                    </a>
                </div>
</div>

CSS


.bg-yellow {
  background-color: yellow;
}
.u-all-in {
    padding: 4rem;
}
.u-all-out {
    padding: 3%
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.grow { 
  transition: all .8s ease; 
}
.br5 {
  border-radius: .5em;
}
.br2 {
  border-radius: .2em;
}
.xbig-icon {
  width: 10rem;
  height: 10rem;
}
.center {
  justify-content: center;
  align-items: center;
}
.dark-gray, h1, h2, h3 {
  color: #383A42;/*#2B2C34;*/
}
.bright-blue {
  color: #1ABFD8;
}
.hover-ul:hover > .hover-ul  {
  border-bottom: 1px solid;
}

.hover-bblue:hover > .hover-bblue  {
  color: #1ABFD8;
}
.w-train-desc {
    margin-right: auto;
    margin-left: auto;
    width: 220px;
    display: inline-block;
}

I'd prefer to not need a wrapper because of how the hovering effects are coded. But this is driving me crazy. All I want is set the width of a div/h4 and have the text centered within that div/h4.

Thank you in advance!

Here is a code pen : https://codepen.io/allisonleigh/pen/MWWjOOa

Solution

Am I missing something? - When I put text-align centre on it, it works.

.w-train-desc {
    width: 220px;
    text-align:center;
}

I dont seem to have have a run button in codepen but if I inspect it, it works