Header text not appearing on mobile

This is how it looks on web
This is how it looks on mobile
The header text does not appear on mobile. Any reason why? I'm new to css. Below is the custom css I've added: Thanks in advance.

Update Added the html instead

<div class="content">

  <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-5e6f422ffd82d42cb292dd66">
    <div class="row sqs-row">
      <div class="col sqs-col-12 span-12">
        <div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-592cf9f5c18d780deacb">
          <div class="sqs-block-content">
            <h2 style="text-align:center;white-space:pre-wrap;"><strong>New Beach Collection</strong></h2>
          </div>
        </div>
        <div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-4b700310cae983fab358">
          <div class="sqs-block-content">
            <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small">
              <a href="/shop" class="sqs-block-button-element--small sqs-block-button-element">Shop Now</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</section>