Как изменить выравнивание абзаца и заголовка с помощью медиа-запроса

Question

Я пытаюсь изменить выравнивание абзаца и заголовка с помощью медиазапроса, чтобы сделать его отзывчивым

Я пытался использовать max-width, margin и padding, но не смог получить желаемый результат.

.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>

Я хочу выровнять их по центру в одну строку.

Answer 1

Используйте минимальную ширину 100% для .col-sm-6

@media (min-width: 576px) and (max-width: 767.98px) { .col-sm-6{ min-width:100% !important;}}