Div not being centered when using margin: auto; (Bootstrap) - html

Question

I have a working example website from the bootstrap template website and was analysing the code to understand how they created it. Namely how they centered the text on the first page located here. The code for that snipplet is,
<header class="masthead text-center text-white d-flex"> <!-- Background image set here -->
<div class="container m-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
...
</div>
<div class="col-lg-8 mx-auto">
...
</div>
</div>
</div>
</header>
So then I noticed that the m-auto was doing the centering. However, when I attempt to create it from scratch for myself and create this basic code,
<style>
#frontpage {
height: 100vh;
width: 100vw;
}
</style>
<section id="frontpage">
<div class="container m-auto">
<div class="row">
<div class="col-8">
<h1> YOU CAN DO IT </h1>
</div>
<div class="col-8">
<h1> I should be centered </h1>
</div>
</div>
</div>
</section>
It doesn't center at all.
What am I forgetting here?
I would suspect that the container gets centered inside it's parent, which takes up the page.

Answer 1

you have copied the code but styles not included for them if guess correctly. anyway, I have corrected please try this one.
<style>
#frontpage {
height: 100vh;
width: 100%;
}
.center-me{
margin: auto;
width: 60%;
text-align: center;
}
</style>
<section id="frontpage">
<div class="center-me">
<div >
<h1> YOU CAN DO IT </h1>
</div>
<div >
<h1> I should be centered </h1>
</div>
</div>
</section>

Answer 2

Is this what you're after?
Version 1
https://codepen.io/panchroma/pen/YdEWZJ
HTML
<section id="frontpage">
<div class="container m-auto">
<div class="row">
<div class="col-8">
<h1> YOU CAN DO IT </h1>
</div>
<div class="col-8">
<h1> I should be centered </h1>
</div>
</div>
</div>
</section>
CSS
#frontpage{
background-color:pink;
height: 100vh;
width: 100vw;
}
.col-8{
border:1px solid grey;
margin-left:auto !important;
margin-right:auto !important;
text-align:center;
}
Version 2
This also centers the text vertically
https://codepen.io/panchroma/pen/KbygzX
HTML
<section id="frontpage">
<div class="container m-auto">
<div class="row vert-align">
<div class="col-8">
<h1>YOU CAN DO IT</h1>
</div>
<div class="col-8">
<h1> I should be centered </h1>
</div>
</div>
</div>
</section>
CSS
#frontpage{
background-color:pink;
height: 100vh;
width: 100vw;
}
.col-8{
margin-left:auto !important;
margin-right:auto !important;
text-align:center;
}
.row.vert-align{
position: absolute;
top: 50%;
left:50%;
-ms-transform: translateY(-50%);
transform: translate(-50%, -50%);
}