How to center the positioning of the css button?

I'm having trouble centering some of the buttons in my . Some buttons are centered and then other buttons are not centered.

<style type="text/css">.btn {
    background-color:transparent;
    border-radius:28px;
    border:1px solid #67823A;
    display:inline-block;
    cursor:pointer;
    color:#67823A;
    font-family:Tahoma;
    font-size:14px;
    padding:4px 13px;
    text-decoration:none;
    position: absolute;
    bottom: 5%;
    left: 10%;
}
.btn:hover {
    background-color:#67823A;
    border-color:#67823A;
}

EDIT:

Listed below is the HTML code.

Keep in mind, I am editing this code through a SaaS application, that provides the ability to edit html/css code. From the looks of it, I already have a div that includes the button option.

<div class="col-12 col-md-6 col-lg-4 py-3 text-center border"><img class="img-fluid" font-family:lucida="" sans=""
                    src="/images/contentimages/images/Newsletter.png" /></a>

        <p class="my-3" style="font-size:18px;">&nbsp;</p>
        <a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1"
            data-purl="custom-business-forms" href="http://example.com/">Newsletters <i
                class="far fa-chevron-right pl-1"></i></a>
    </div>

    <div class="col-12 col-md-6 col-lg-4 py-3 text-center border"><a
            href="http://example.com/"><img class="img-fluid"
                font-family:lucida="" sans="" src="/images/contentimages/images/Presentation_Folder.png" /></a>

        <p class="my-3" style="font-size:18px;">&nbsp;</p>
        <a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1"
            data-purl="custom-business-forms"
            href="http://example.com/">Presentation Folders <i
                class="far fa-chevron-right pl-1"></i></a>
    </div>

    <div class="col-12 col-md-6 col-lg-4 py-3 text-center border"><a
            href="http://example.com/"><img class="img-fluid" font-family:lucida=""
                sans="" src="/images/contentimages/images/Foldover_Business_Cards.png" /></a>

        <p class="my-3" style="font-size:18px;">&nbsp;</p>
        <a class="btn btn-info btn-sm edatalayer order-1" data-list="product-listing-page" data-position="1"
            data-purl="custom-business-forms" href="http://example.com/">Foldover
            Business Cards <i class="far fa-chevron-right pl-1"></i></a>
    </div>
</div>

Solution

I suggest using flexbox. Simply wrap your button inside a div Element, set the div's display property to flex and the justify-content property to center and you're done.

Since you didn't share a code snippet, I made my own, minimalist code snippet.

<html>
    <head>
        <link href="./style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div class="flex-container">
            <button class="btn">some button</button>
        </div>
    </body>
</html>

And here's the CSS to go along with it:

.flex-container {
    display: flex;
    justify-content: center;
}

A complete guide to flexbox can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/