Can't center <p> nested inside of 2 divs and a section - html

Question

I'm trying to center my paragraphs, but having the worst time of trying to do it:
.centerLoginForm {
display: flex;
justify-content: center;
}
.mainContent {
position: relative;
color: white;
width: 60%;
padding: 1.5% 2.5% 0 2.5%;
margin-top: 5%;
background-color: black;
border-radius: 5% 5% 5% 5%;
}
.underHead,
.underHead p {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
.underHead {
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
<div class='centerLoginForm'>
<section class='mainContent'>
<h1>Welcome to the BYU Idaho Radio Intranet!</h1>
<div class='underHead'>
<p>Computers and computer networks are a funny thing. We interact with them mostly through the internet, which is just a whole bunch of interconnected computers around the world. Well this is an <i>intranet</i>: a local network just like the internet,
only with fewer connected computers.</p>
<p>The purpose of this intranet is to guide through troubleshooting, monitoring critical systems, and station documentation. This site is easy to navigate and you should find all the things you are looking for just by following the navigation links.</p>
<p>This was built to be a living, breathing application. Some dude originally built this, but he welcomes support, ideas, and if somebody wanted to chip in on developing, he would love that too! So please, if you have ideas, thoughts, or skills, share
them! Engineering unfortunately is having fewer and fewer people enter into its field, and needs as many bright minds as it can take and you have a bright mind!</p>
</div>
</section>
</div>
As you can see, the text inside of the <p> tags is is following it's natural position, instead of following what I have in my class .underHead. I've tried text-align, content-align, justify-content, and I just can't figure out a way to center that content.

Answer 1

I think this is what you are looking to do:
.centerLoginForm {
display: flex;
justify-content: center;
}
.mainContent {
position: relative;
color: white;
width: 60%;
padding: 1.5% 2.5% 0 2.5%;
margin-top: 5%;
background-color: black;
border-radius: 5% 5% 5% 5%;
}
.underHead {
display: block;
margin: auto;
width: 70%;
text-align: center;
}
<div class='centerLoginForm'>
<section class='mainContent'>
<h1>Welcome to the BYU Idaho Radio Intranet!</h1>
<div class='underHead'>
<p>Computers and computer networks are a funny thing. We interact with them mostly through the internet, which is just a whole bunch of interconnected computers around the world. Well this is an <i>intranet</i>: a local network just like the internet,
only with fewer connected computers.</p>
<p>The purpose of this intranet is to guide through troubleshooting, monitoring critical systems, and station documentation. This site is easy to navigate and you should find all the things you are looking for just by following the navigation links.</p>
<p>This was built to be a living, breathing application. Some dude originally built this, but he welcomes support, ideas, and if somebody wanted to chip in on developing, he would love that too! So please, if you have ideas, thoughts, or skills, share
them! Engineering unfortunately is having fewer and fewer people enter into its field, and needs as many bright minds as it can take and you have a bright mind!</p>
</div>
</section>
</div>