I have problem with padding text next to an img - css

Question

I want to place text next to an image and add padding to it. I have both text and image in one box, so that may be problem. I also need site to be mobile friendly.
Here is my code:
.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>
Now, it works when the browser is resized to minimum, but it doesn't work on full. I know why, see image below, I just don't know how to fix that.
Image of what I have, and what I need.

Answer 1

so here is my solution, i hope its that what you wanted..
.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>