I'm having trouble centering the button in my jumbotron. I've tried several different solutions, all taken from other questions asked on here but I lust can't seem to get the damn thing centered without putting the button inside a separate div. If that what I have to do to get it to work, then fine, but I'd rather not have the extra code to keep the document tidier. Any suggestions?
.btn {
width: 150px;
margin: 30px 0px 50px;
display: flex;
align-items: center;
justify-content: center;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="row">
<div class="col-12 col-md-m6 my-4">
<h1 class="jumbotron-header">Welcome, bakers!</h1>
</div>
<div class="col-12 jumbotron-content">
<p class="jumbotron-text col-12 col-lg-6">
Days gone pie is the recipe site here to help you become the star baker of your own kitchen! Every recipe is provided by the community, so you know that each one has been tested and approved by friends and family all over the world! From beautiful breads
to delicious desserts. Colourful cakes to perfect pastry, there's a recipe here to suit every occasion. It doesn't matter if your a budding novice, or a skilled baker, days gone pie has something for everyone. So, why not sign up now and start showcasing
your baking talent!
</p>
<button class="btn btn-primary btn-lg btn-signup col-12"><strong>Sign Up</strong>
</button>
</div>
