how to change only the body text - html

Question

In my single wordpress posts I want to apply a padding of 100px to the left and right text. The problem is that when I apply it to .single .post-content the images also get a padding. However, I want all of the images on the posts pages to be set to 100%. Is there a way to separate the actual body text and the images? This seems like a fairly simple question. But I can't figure it out. Any help is appreciated.
single.php
<?php
get_header();
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
<?php $featuredImage = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' ); ?>
<div class="banner" style="background:url(<?php echo $featuredImage; ?>) no-repeat;"></div>
<?php wpb_set_post_views(get_the_ID()); ?>
<div class="post-info">
<h1 class="post-title"><?php the_title(); ?></h1>
<h2 class="post-date"><?php echo strip_tags(get_the_term_list( $post->ID, 'location', 'Location: ', ', ', ' • ' ));?><?php the_date('F m, Y'); ?></h2>
</div>
<div class="post-content"><?php the_content(); ?></div>
<div id="wrapper-footer"><div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'post-footer-comment-count', 'none'); ?></h1><div class="share"><span>share</span> <?php get_template_part( 'share-buttons-post' ); ?></div></div>
<div class="post-footer-bloglovin"><h1>never miss a post</h1><h2>follow on email'</h2></div></div>
<?php get_template_part( 'prevandnextpost' ); ?>
<?php get_template_part( 'related-posts' ); ?>
<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
?>
css
.single .post-title,
.post-title a,
.post-title a:link, .post-title a:visited {
font-family: 'Questrial', sans-serif;
font-size:30px;
margin-left:6px;
margin: 0 auto;
color:#000000;
margin-bottom: 3px;
margin-top:30px;
}
.single .post-date {
font-family: 'Questrial', sans-serif;
font-size:13px;
margin-left:6px;
margin: 0 auto;
color:#000000;
}
.single .post-content {
text-decoration: none;
color: #000000;
display: block;
font-family: 'Crimson Text', serif;
font-size: 18px;
margin:0 auto;
margin-top: -50px;
padding-left:100px;
padding-right:100px;
}
.single .post-info {
background:#ffffff;
padding-left: 100px;
padding-right:100px;
max-width: 1865px;
background-position:center;
background-clip: content-box;
margin: 0 auto;
height:110px;
bottom:100px;
position: relative;
}
.single img {
max-width:100%;
padding: 0 0 0 0 !important;
height:auto;
}

Answer 1

You are adding the padding to this selector (which searches for .post-content inside of .single element):
.single .post-content
Try wrapping text inside a p tag:
.post-content p {
padding-left:100px;
padding-right:100px;
}
Example below:
.post-content {
text-decoration: none;
color: #000000;
display: block;
font-family: 'Crimson Text', serif;
font-size: 18px;
margin: 0 auto;
margin-top: 0px;
/* padding-left: 100px; */
/* padding-right: 100px; */
width: 300px;
border: 1px solid gray;
}
.post-content p {
padding-left: 100px;
padding-right: 100px;
}
<div class="post-content">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300×100&w=300&h=100" />
<p>TEST CONTENT TEST CONTENT OTHER TEST CONTENT TEST LONGER WORD</p>
</div>

Answer 2

if you defined:
.single .post-content {
...
padding-left:100px;
padding-right:100px;
}
and images are inside of .post-content, then you need to state a following rule:
.single img {
max-width:100%;
padding: 0 0 0 0 !important;
height:auto;
margin-left: -100px;
margin-right: -100px;
}