Bootstrap 4 为什么使用bootsrtap col sm时文本重叠？

我在我的网站上使用引导网格系统，但是当我缩小屏幕时，文本开始重叠。我该怎么阻止这一切？我留下了一张照片来说明我的意思。我在网上找不到任何答案，所以我发了帖子

代码：

<div class="col-sm-6">
        <img class="img-center" src="img/Linkedin_ Pic .jpg" width="50%" height="400px">
        <br>
        <h2 class="text-center">Edgar Hardy - President</h2>
        <br>

       <p class="text-center">

          ...</p>

          <div class="br"></div>

        <p class="text-center">...  
          </p>

        </div>


        <div class="col-sm-6">
            <img class="img-center" src="img/Mary Cockerham.png" width="50%" height="400px">
            <br>
            <h2 class="text-center">Mary Cockerham - Vice-President</h2>
            ...       
        </div>
    </div>

    <div class="row"> 
      <div class="col-sm-6">
        <img class="img-center" src="img/audrey jones cropped pic.png" width="50%" height="400px">
        <br>
        <h2 class="text-center">Treasurer</h2>
        ...
        </div>
        <div class="col-sm-6">
            <img class="img-center" src="img/Susana Bali.png" width="50%" height="400px">
            <br>
            <h2 class="text-center">Lorem Ispum</h2>
           ...

            </div>
      </div>

埃德加·哈代总统




。。。



玛丽·科克汉姆-副总裁
...       


司库
...


奥雷姆
...

前两项不在该行中。另外，使用img fliud类作为img标记。使用以下命令： （我用自己的图像测试代码。您可以为它们更改src属性。）

埃德加·哈代总统




。。。



玛丽·科克汉姆-副总裁
...


司库
...


奥雷姆
...

嘿，谢谢，我现在遇到了一个问题，我无法正确调整图像的大小为什么？>看这里：希望你的问题得到解决。