メイン記事のサムネイル３列表示、スマホでは２列表示にさせるCSSに関して。

> 記事をクリックし閲覧すると『スマホ表示でのみ』
> 左右の空白(スペース)が無くなってしまい、
> 横100パーセント表示となってしまいます。
>
> 画像の表示も左右の余白無く横いっぱいまで表示されてしまい
> 閲覧しにくく、文章も左端のギリギリから始まり
> 右のギリギリまで続いてしまいます。

どのセレクタがどんな状態かはイマイチわかりませんけれども、左右のスペースが必要であれば
#mainのmarginを設定、paddingを設定いずれかかと。.articleでもいけそうですし、#the-contentでもまぁいけるかも。ここらはデザイン次第です。

スマホの時とあるので、

@media screen and (max-width: 440px){
 #main {
  margin: 0 5px;
  /*あるいは padding: 5px; とか*/
 }
}

例のサンプルはリスト表示についてなので、ページの記事自体の見え方などは考慮してません。逆を言うとどう見えるかは僕も見たことありません(笑)
なのでどこを直せば良いかは実際のページを見ないとアレですし、見たほうが確かなんですが、想像で書けば上記のとおりです。
サンプル通りにやればmediaクエリは、min-width:320pxからmax-width:767pxで設定してあると思います。
max-width: 440pxとやれば、440pxまでの画面幅の端末という事です。

記事の場合、bodyタグに記事ページ用のクラスが入るので、そのbodyの中の#mainとして設定しても良いかもしれません。

Hidekichi様

ご回答誠にありがとうございます。

スタイルシートに記述してpaddingで設定をしたところ、無事にスマホ画面の投稿記事の左右にスペースを設けることが出来ました。

しかし、上記ですと【問題のあったスマホ表示での記事部分】だけでなく、【問題の無かったスマホ表示のトップページのサムネイル記事、およびサイドバー】にもその分左右にスペースが追加されてしまいました。

左右の空白が無くなっているのはスマホ表示の記事ページの【記事上部のパンくずリスト～記事下部のコメントを送信】の間だけなのですが、それを指定するにはどのようなタグを使用すればよろしいでしょうか？

グーグルクロームのデベロッパーで確認したところ、スマホ記事表示画面のbodyではなくmainとなる部分に上記の問題が発生しているようです。

スマホ記事表示画面のmainのみをピンポイントで左右のスペースを調整することは可能でしょうか？

もしかすると、/*画面幅で#mainのサイズ変更*/の部分もコピペされている可能性があります。
これは、codepen上でスマホのサイズまでレスポンシブに変更できるように入れてあるだけのものなので、本来は必要ない部分です。
もしこれらが無い場合は、デフォルトのSimplicityのcssが動作して余白ができるかと思います。

Simplicityで完全レスポンシブがoffならmobile.cssに書いてある#mainのプロパティが動作するかと思います。
ここにはpadding等が設定してあるので余白は開くはずです。

/*画面幅で#mainのサイズ変更*/の部分を削除して何かしら不具合がある場合は、逆にそっちを何とかしない感じかと思います。
またリスト表示にはなくて、投稿記事の部分にだけ何かしたい場合は、#the-contentです。記事タイトルやpost-metaも含めたければ.articleです。

PC画面で言う所の左カラムは#mainにあたります。パンくずリストなども含め左カラム全体の設定ができます。
.articleはパンくずリスト、関連記事は含みません。
#the-contentは、上記に加え、トップSNSボタン、ボトムSNSボタン上の広告も含まない純粋な記事部分です。

> スマホ記事表示画面のmainのみをピンポイントで
> 左右のスペースを調整することは可能でしょうか？

もちろんできますが、その#mainがどのような状態になっているかによって何通りかやり方があります。
#mainの親のタグにpaddingを入れても良いですし、#mainにmarginを入れてもpaddingを入れても良いです。#mainの親はmainになっていると思います(simplicity2の場合)。1系では#body-inでしょうか。

もしこの親にpadding等を入れる場合は、box-sizing: border-boxが入ってない場合は入れて下さい。そうしないと増やした分だけ外に広がって画面をはみ出すことがあります。

つまり#mainがどうなっているかがわからないと前のレスで答えたメディアクエリを子テーマstyle.cssに入れるか、/*画面幅で#mainのサイズ変更*/の部分を削除するか、完全レスポンシブがoffなら子テーマmobile.cssにでも、#mainのpaddingやらを設定するかぐらいかなぁと。

デベロッパーツールで、#mainをセレクトして右側パネルのプロパティ欄で#mainが何度か上書きされているのを確認できると思います(取り消し線、あるいはグレー)。その一番上が現在有効になっているプロパティですから、その欄の右上にあるstyle.css等のファイル名をマウスオーバーすれば、それがどのcssかがわかります。
そのcssに対して、marginやpaddingを上書きする値を入れれば思うとおりにイケるのではなかろうかと思います。ようはそのファイルの一番下に欲しいスタイルを追記すればよいわけです。記入箇所がわかっているのであれば、そこを修正すれば良いということになります。

× /*画面幅で#mainのサイズ変更*/の部分を削除して何かしら不具合がある場合は、逆にそっちを何とかしない感じかと思います

◯ /*画面幅で#mainのサイズ変更*/の部分を削除して何かしら不具合がある場合は、逆にそっちを何とかしないとイケナイ感じかと思います

Hidekichi様

CSSを確認しましたところ、ご指摘の通り/*画面幅で#mainのサイズ変更*/の部分までコピペしておりました。

無事にスマホ記事画面の左右にスペースを作ることができました。

ただ、その分スマホ表示のトップページすべてに左右の余白が追加されてしまいました(笑)

今後しっかりとCSSを勉強して自分の納得できるデザインにできるよう努めさせていただきます。

この度は誠にありがとうございました！

他の方の役に立たないような質問内容ではありましたが、ご丁寧な回答を頂き感謝の気持ちでいっぱいです！