title: How do I center text in div with fixed width?
body: <p>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.</p>
  <p>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.</p>
  <h1>HTML</h1>
  <pre class="lang-html prettyprint-override"><code>&lt;div class = &quot;br2 flex flex-row flex-wrap&quot;&gt;
    &lt;div class=&quot;u-all-out&quot;&gt; 
                        &lt;a class = &quot; flex br5 bg-yellow shadow-1 center flex-col hover-bblue grow hover-ul u-all-in&quot; href=&quot;&quot;&gt;
                            &lt;div class = &quot;flex&quot;&gt;
                                &lt;img class=&quot;xbig-icon br5 mb2&quot; id = &quot;train_img_1&quot;&gt;
                            &lt;/div&gt;
                            &lt;h4 class =&quot; dark-gray items-center hover-bblue w-train-desc&quot; id = &quot;train_title_1&quot;&gt; Here is something&lt;/h4&gt;
                            &lt;h6 class =&quot;flex bright-blue items-center hover-bblue rm-mb rm-mt italic hover-ul&quot;&gt;Start here&lt;/h6&gt;
                        &lt;/a&gt;
                    &lt;/div&gt;
    &lt;div class=&quot;u-all-out&quot;&gt;
                      &lt;a class = &quot; flex br5 bg-yellow shadow-1 center flex-col hover-bblue grow hover-ul u-all-in&quot; href=&quot;&quot;&gt;
                          &lt;div class = &quot;flex&quot;&gt;
                              &lt;img class=&quot;xbig-icon br5 mb2&quot; id = &quot;train_img_2&quot;&gt;
                          &lt;/div&gt;
                          &lt;h4 class =&quot;dark-gray items-center hover-bblue w-train-desc&quot; id = &quot;train_title_2&quot;&gt; Here is another&lt;/h4&gt;
                          &lt;h6 class =&quot;flex bright-blue items-center hover-bblue rm-mb rm-mt italic hover-ul&quot;&gt;Start here&lt;/h6&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h1>CSS</h1>
  <pre class="lang-css prettyprint-override"><code>
  .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 &gt; .hover-ul  {
    border-bottom: 1px solid;
  }
  
  .hover-bblue:hover &gt; .hover-bblue  {
    color: #1ABFD8;
  }
  .w-train-desc {
      margin-right: auto;
      margin-left: auto;
      width: 220px;
      display: inline-block;
  }
  </code></pre>
  <p>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.</p>
  <p>Thank you in advance!</p>
  <p>Here is a code pen : <a href="https://codepen.io/allisonleigh/pen/MWWjOOa" rel="nofollow noreferrer">https://codepen.io/allisonleigh/pen/MWWjOOa</a></p>