I'm struggling to center a container inside a container-fluid. Any suggestions on how to make it work?
/* Setup Buttons Specific Styling */
.setup-bg {
background: url("https://image.ibb.co/geAGqy/setupbtns_bg.png");
background-repeat: no-repeat;
background-position: center;
height: 550px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container-fluid setup-bg my-auto">
<div class="container my-auto">
<h3 class="h3 white my-5 text-center justify-content-center">
A simple tool for you to create your own social share bar.
<br> Click the social media icons to add them to your bar</h3>
<div class="row button-row justify-content-center">
<div class="col-xs-4 col-sm-3 col-md-1">
<label class="image-checkbox">
<a class="htmlShareBtns selectBox" id="html_fs_facebook-btn" width="150"></a>
<input type="checkbox" name="facebook" value="facebook">
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-1">
<label class="image-checkbox">
<a class="htmlShareBtns selectBox" id="html_fs_linkedin-btn" width="150"></a>
<input type="checkbox" name="linkedin" value="linkedin">
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-1">
<label class="image-checkbox">
<a class="htmlShareBtns selectBox" id="html_fs_twitter-btn" width="150"></a>
<input type="checkbox" name="twitter" value="twitter">
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-1">
<label class="image-checkbox">
<a class="htmlShareBtns selectBox" id="html_fs_pocket-btn" width="150"></a>
<input type="checkbox" name="pocket" value="pocket">
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-1">
<label class="image-checkbox">
<a class="htmlShareBtns selectBox" id="html_fs_copy-btn" width="150"></a>
<input type="checkbox" name="copy" value="copy">
</label>
</div>
</div>
<div class="row text-center my-5">
<div class="col-12">
<button class="btn btn-primary fs_btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="getShareButtonsCode()">Setup social share buttons</button>
</div>
</div>
</div>
</div>Can anyone provide guidance on how to center the text and buttons inside the container-fluid shown above in the snippet?