<div id="homepagemain">
  <div id="banner">
    <a class="button">My Paystub</a>
    <a class="button" type="button" href="https://portal.paychekplus.com/" target="_blank">Pay Card</a>
    <a class="button" asp-controller="Home" asp-action="NewsLetter">Monthly Newsletter</a>
  </div>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item active">
        @Html.Partial("_CorporateEvents", Model.CorporateEvents)
      </div>
      <div class="item">
        <a href="https://www.asbaces.com/newaces/(S(ujn24e2mcpp1kzkc4ivg0kzh))/storefront.aspx">
                    @Html.Partial("_CorporateStore", Model.CorporateStore)
                </a>
      </div>
      <div class="item">
        <a asp-controller="Home" asp-action="NewsLetter">
                    @Html.Partial("_CorporateNews", Model.CorporateNews)
                </a>
      </div>
    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
  </div>
</div>
<p><a href="https://www.sitepoint.com/community/t/why-are-these-buttons-getting-misaligned/296111?u=sama74">https://www.sitepoint.com/community/t/why-are-these-buttons-getting-misaligned/296111?u=sama74</a></p>

#banner {
  background-image: url("/Images/Banner.png");
  text-align: center;
}

.button {
  display: inline-block;
  background: linear-gradient(to bottom, #95bfe6, aliceblue);
  color: #002d62;
  border-radius: 50%;
  font-size: larger;
  border-style: solid;
  border-color: #002d62;
  border-width: 1px;
  height: 70px;
  width: 165px;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  line-height: 55px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 1em;
}
.button:hover {
  transform: scale(1.05);
}

#myCarousel {
  margin-top: 1%;
  margin-bottom: 1%;
}