Добавьте CSS только к тексту на теле страницы.

В моих одиночных записях WordPress я хочу применить отступ в 100 пикселей слева и справа. Проблема в том, что когда я применяю его к .single .post-content, изображения также получают отступ. Однако я хочу, чтобы все изображения на страницах постов были установлены на 100%. Есть ли способ разделить основной текст и изображения? Это кажется довольно простым вопросом. Но я не могу разобраться. Любая помощь будет оценена.

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>поделиться</span> <?php get_template_part( 'share-buttons-post' ); ?></div></div>
        <div class="post-footer-bloglovin"><h1>не пропустите ни одного поста</h1><h2><a href="#">подписаться по электронной почте</a></h2></div></div>
 <?php get_template_part( 'prevandnextpost' ); ?>
     <?php get_template_part( 'related-posts' ); ?>

<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>Контент не найден</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;
}
.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;
}

В вашем CSS-правиле для .single img вы в настоящее время устанавливаете только максимальную ширину, и отступ, который вы установили, применяется непосредственно к изображению внутри блока контента.

Попробуйте установить изображение на полную ширину и вытянуть стороны с помощью отрицательного отступа:

.single img {
     width:100%;
     margin: 0 -100px;
     }

Если вы не хотите полностью изменять структуру шаблона single.php, вы просто должны установить некоторые глобальные CSS для применения отступов в 100px слева/справа для всех текстовых элементов, таких как абзацы и заголовки внутри .single.

.single p,
.single h1,
.single h2,
.single h3{padding:0 100px;}  //хотя я предлагаю использовать отзывчивые единицы, а не px

.single p,
.single h1,
.single h2,
.single h3{padding:0 4.5rem;} //как здесь, используя rem, em или %

Это зависит от того, как вы добавляете контент на свои страницы, используете ли вы Gutenberg или плагин для построения страниц/шаблонов. Но я бы просто добавил отступы ко всем абзацам и заголовкам внутри .post-content, чтобы ваши текстовые элементы были единственными частями, к которым применяются отступы, а не изображения. Вам просто нужно убедиться, что вы не добавляете ни одного изображения внутри тегов <p></p>. Попробуйте использовать div для обрамления ваших изображений.

Вы также можете добавить изображения, используя свойства CSS background-image или background на div с шириной 100%.

.single img{background:url(/img.png) no-repeat center center;background-size:cover;min-width:100%;width:100%;}

На самом деле, это зависит от того, как вы настраиваете ваш фактический контент на каждой странице в WordPress. Но что бы вы ни делали, вы действительно должны избегать отрицательных отступов или padding. Это лишь приведет к проблемам на каком-то этапе с сложными системами шаблонов, такими как WordPress, даже если большинство сайта выглядит нормально.