У меня проблема с заполнением текста рядом с 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>

Теперь он работает, когда размер браузера уменьшен до минимума, но не работает на полную.Я знаю почему, см. Изображение ниже, я просто не знаю, как это исправить.

Изображение того, что у меня есть, и что мне нужно.

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>