Move elements one below other in block - php

Question

I have this little problem with my site. I want to move block title and second line to center, and button to keep in at center too, something like this:
image how wanted to look
Currently it looks like this:
current look on block
Where can be seen this form is here at bottom of page. This is what I do to customize it myself, I updated this CSS class:
.heading {
font-family: GOTHAM-BOLD;
font-size: 28px;
color: #273a55;
margin-left:340px; // i added this line, but seems it mess entire look.
}
and this is PHP code from that form:
<div class="footer box">
<div class="bluebg box"></div>
<div class="container">
<div class="footermain box">
<div class="footertop box">
<div class="row">
<div class="col-md-6 nopd">
<div class="ftleft box">
<div class="ftlinner box">
<h1 class="heading"><?php echo (get_field('news_letter_title'))?get_field('news_letter_title'):get_field('news_letter_title', 'option') ?></h1>
<?php echo (get_field('news_letter_tag'))?get_field('news_letter_tag'):get_field('news_letter_tag','option') ?>
</div>
</div>
</div>
<?php
endwhile;
It seems that Heading title and line bellow that is contained into one class called heading. So question now is now to move to center to start looking like image provided.

Answer 1

Follow these steps :
Change your col-md-6 class to col-md-12 in both the text bloc and the button bloc.
Add class text-center to the text column like this
<div class="col-md-12 nopd text-center" >
Add style justify-content: center; to "footertop box" like this :
<div class="footertop box" style="justify-content: center;">
Remove class noleft from button column and add margin:0 to button

Answer 2

as far as I understand, you want to have the texts centered and the button below them
for quick solution, add this class to your css:
.footertop.box .row {
display: block;
width: 100%;
text-align: center;
}
delete div's col-md-6 classes which are in div.row