Can't center a button succesfully within a container - css

Question

I'm using bootstrap 4 and I can't manage to center a button/link properly - no matter how I try to use text-center class (surround it with div or on the link)
<div class="row text-center">
<a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
</div>
codepen here:
https://codepen.io/anon/pen/GdbPyr

Answer 1

Just add: justify-content-center to the parent component. The code will look like this:
<!-- ******Key Features****** -->
<section class="key-features ">
<div class="container pt-4">
<div class="row justify-content-center"style="background: red">
<a class="btn btn-primary text-center" href="{% url "users:postcode" %}">Get Started</a>
</div>
</div>
</section>
working pen: https://codepen.io/manAbl/pen/bMPOJM?editors=1000 ;
-- I added the background just to have a hint, that's something that really help me and allow me to have some perspective from time to time --
Hope helps :)

Answer 2

You can replace the text-center on your btn with mx-auto to force even left/right margins:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<section class="key-features ">
<div class="container pt-4">
<div class="row">
<a class="btn btn-primary mx-auto" href="{% url "users:postcode" %}">Get Started</a>
</div>
</div>
</section>