title: How to align button of my card in the center?
body: <p>I need to align &quot;Check Github&quot; button in the center of the card. I tried <code>item-align: center;</code> and <code>justify-content:center:</code> and <code>margin-right: 50px;</code> but it does not work on this element.
  Please advise how to resolve this issue. Thanks.</p>
  <p>This is my HTML code along with CSS part of the code for the button:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn {
    border-radius: 1rem;
    transition: all 0.5s;
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    font-size: 16px;
    opacity: 85%;
    background-color: #ffc229;
    padding: 1rem 0.3rem;
    margin-bottom: 10px;
    margin-top: 10px;
   } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
       &lt;div class="flex"&gt;
          &lt;div class="col"&gt;
  
            &lt;a href="#"&gt;
              &lt;img src="pac_man.jpg" width="" height="" alt="Pac-Men"&gt;
            &lt;/a&gt;
  
            &lt;h3&gt;Pac-Men&lt;/h3&gt;
            &lt;p&gt;Create as many or as little Pac-Men as you like and see them bouncing
              around!&lt;/p&gt;
            &lt;p&gt; Try it with the &lt;a href="https://raw.githack.com/mayazhl/PacMen_Factory/main/index.html"
                target="_blank"&gt;live demo.&lt;/p&gt;
  
            &lt;a class="btn" href="https://github.com/mayazhl/PacMen_Factory"&gt;Check Github&lt;/a&gt;
      &lt;/div&gt; 
  &lt;/section&gt; </code></pre>
  </div>
  </div>
  </p>