I've been attempting to modify the alignment of the paragraph and heading utilizing a media query to ensure responsiveness.
Despite my efforts with max-width, margin, and padding, I have not achieved the desired outcome.
.about-background h2 {
margin-top: 2em;
padding-right: 3.5em;
}
@media (min-width: 576px) and (max-width: 767.98px) {
.lead {
font-size: 0.9em;
width: 100%;
max-width: 768px;
}
.about-background {
background: white;
}
.about-background h2 {
font-size: 0.6;
margin-left: 8em;
width: 100%;
}
}<div class="jumbotron about-background">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-6">
<h2><strong>We are InCFO</strong></h2>
<p class="lead" style="margin-top: 4em; padding-right: 7em;">Our mission to provide a range of financial services to companies to make their financial needs easy that needed to run and expand their business.</p>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="arrow bounce">
<a class="fa fa-arrow-down fa-3x" href="#do" v-smooth-scroll></a>
</div>
</div>
</div>I am aiming to center align them on one line.