How can I line up this button better with the content in the middle? It seems off center to me:

Issue

margin-top on the button itself may be the answer but it feels wrong to me. If it is hopefully an answer will confirm. What is the best solution to lower the button a smidgen?

The codepen for extra context: https://codepen.io/AdanRod133/full/WNZEYJX

body {
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: coral;
  display: grid;
  grid-template-columns: 100px 300px 115px;
  grid-row-gap: 1em;
  justify-content: space-around;
  align-items: center;
  width: 50%;
  height: 100px;
  padding: 10px;
}

img {
  width: 100%;
  height: 100%;
  background-color: #2D8C9E;
}

.btn-learn {
  justify-self: center;
  align-self: center;
  height: 40px;
  border: none;
  border-radius: 10px;
  width: 125px;
}

.body-title {
  font-size: 1.15em;
  line-height: 1.5em;
  font-weight: bold;
  justify-self: center;
}

.text-body {
  font-size: 16px;
  grid-column: 3 / 5;
}

<div class="container">
  <img src="" alt="">
  <div class="content">
    <h3 class="body-title">
      Startup
    </h3>
    <p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
  </div>
  <button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>

Solution

Here is the result: https://codepen.io/AdanRod133/full/WNZEYJX

.btn-learn{
position: relative;
height: 40px;
border: none;
border-radius: 5px;
background-color: #00A57F;
color: #D8D7DF;
height: 2.5em;
padding: 10px 25px;
outline: none;
cursor: pointer;
display: inline-block;
justify-self: end;
transition: all .2s ease-in-out;
}

I got rid of the width and set the button to inline-block. Then added some padding.

I wanted to make something css-grid only in order to get more practice in. Working with the padding as well as adding grid gap allowed the items to sit where I wanted them to.

Answered By - DonnyRodriguez