html – How to straighten your card button in the middle?

I need to align the “Check Github” button in the middle of the card. I tried item-align: center; And justify-content:center: And margin-right: 50px; But it does not work on this element. Please tell, how to solve this problem. Thanks.

This is my HTML code with the CSS section of the code for the button:

<section>
     <div class="flex">
        <div class="col">

          <a href="#">
            <img src="pac_man.jpg" width="" height="" alt="Pac-Men">
          </a>

          <h3>Pac-Men</h3>
          <p>Create as many or as little Pac-Men as you like and see them bouncing
            around!</p>
          <p> Try it with the <a href="https://raw.githack.com/mayazhl/PacMen_Factory/main/index.html"
              target="_blank">live demo.</p>

          <a class="btn" href="https://github.com/mayazhl/PacMen_Factory">Check Github</a>
    </div> 
</section> 

.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;
 } 



Write a Comment

Your email address will not be published. Required fields are marked *