Bootstrap 4: heading won't align to center

Hi, I’m starting to fix my css since I just updated our website’s bootstrap source code to version 4.

I’ve got an issue with regards to aligning the heading to center. I’ve tried the following options:

option 1:

#sectionname h2 {
text-align: center;
}

option 2:

#sectionname h2 {
text-align: center!important;
}

option 3: (the latest i’ve added) <h2 class="text-center">How does it work?</h2>

still, it won’t work. I’ve shared a screen cap for reference.

Any help will be appreciated. Much love to bootstrap!

[ghost]

Since your screenshot shows that it is between row try using mx-auto

<div class='row'>
  <h2 class='mx-auto'>hello</h2>
</div>

[mdo]

Columns should be the only children elements of a row. Rows are flexbox, thus your heading is behaving as a flex item.