我在img旁边填充文本时遇到问题

Question

我想在图像旁边放置文本并为其添加填充。我在一个框中有文本和图像，所以这可能是个问题。我还需要网站移动友好。

这是我的代码：

.content-title {
  font-size: 50px;
}

#section-a ul {
  list-style: none;
  margin: 0px;
  padding: 0;
}

#tiso {
  position: static;
  padding: 0px;
  height: auto;
  float: left;
  max-width: 800px;
  max-height: 800px;
}

#tiso_text {
  padding: 3em;
  text-align: center;
}

<section id="section-a" class="grid">
  <div class="content-wrap">
    <ul class="obr">
      <img src="IMG/tiso.png" alt="Tiso-main" id="tiso">
      <h1 class="content-title">Jozef Tiso</h1>
      <li class="textcontent">
        <p id="tiso_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate obcaecati et porro quidem iure, odio.
        </p>
      </li>
    </ul>
  </div>
</section>

现在，它在浏览器调整到最小时工作，但它不能完全工作。我知道为什么，见下图，我只是不知道如何解决这个问题。

Image of what I have, and what I need.

Answer 1

所以这是我的解决方案，我希望它是你想要的......

 .content-title {
  font-size: 50px;
 text-align: center;
}


.item {
 max-width: 300px;
 float: left;
 padding: 20px 3rem;

 }

 #tiso {
  position: static;
  padding: 0px;
  height: auto;
  float: left;
  max-width: 800px;
  max-height: 800px;
  display: block;
 }

  #tiso_text {

  text-align: center;
 }

<section id="section-a" class="grid">
  <div class="content-wrap">
    <div class="box">
      <img src="IMG/tiso.png" alt="Tiso-main" id="tiso">

      
      <div class="item">
        <h1 class="content-title">Jozef Tiso</h1>
        <p id="tiso_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
          Voluptate obcaecati et porro quidem iure, odio.
        </p>
     </div>
    </div>
  </div>
</section>