problem z responsywnością - bootstrap

Hej, robię prosty projekt z frontendmentor. Żeby sobie ułatwić używam Bootstrapa, jednak widok mobilny wygląda fatalnie. Podrzucam zdjęcia. Najgorzej zachowuje się właśnie rozdzielczość mobilek. Jak zrobić żeby ten banner był responsywny i nie urywał się tak w połowie tekstu? W css mam tylko tyle

.banner {
height: 60vh;
background-color: #2c2640;
html

<section class="banner">

  <div class="col-lg-6 mb-5 mb-lg-0 col-md-4 col-sm-3 ">

    <br>
    <br>
    <br>
    <br>
    <br>
   
    <h1  style="color:white; font-size: 60px; font-family:'DM Serif Display', serif;  ">Humanizing your
      insurance.</h1>
    <p style="color:white;">
      <br>
      
      
      Get your life insurance coverage easier and faster. We blend our expertise
      and technology to help you find the plan that’s right for you. Ensure you
      and your loved ones are protected.
    </p>

![mobile2.png](https://4programmers.net/uploads/attachment/5f/5f4b8396f3c00.png

Nie używa się już <br>. Od tego masz padding/margin.

Są (przynajmniej) dwie możliwości:
Masz tam ustawiony overflow:hidden, albo jakaś inna warstwa ci ten baner zasłania.
Na podstawie samych obrazków trudno coś wyrokować.