スマホ画面の表示幅を調整するには？要らないマージンを無くしたいです

Question

###前提・実現したいこと
ワードプレスのStudioという無料テーマでHP作成しています。
CSSの知識がほとんどありませんので申し訳ないのですが教えていただきたいことがあります。
スマホ表示にすると両脇に無駄なマージンがあるので、無くしたいのです。
スタイルシート内メディアクエリでレスポンシブ表示の設定がある部分は見つけているのですが
どのように変更したら良いのかわかりません。
どうしたらスマホで両脇マージンが無く見やすくなるのか教えてください(;_;)
よろしくお願いします。

###発生している問題・エラーメッセージ

スマホ表示画面では両脇にスペースができてしまい文章が読みにくい

###該当のソースコード

/* =24. Responsive design
-------------------------------------------------------------- */



@media screen and (max-width: 750px) { /* Mobile Devices Landscape */

    .site-title,
    .entry-title {
        font-size: large;
    }

    img,
    .alignleft,
    .alignright,
    .footer-col #widget-title {
        display: block;
        float: none;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .site-info,
    .site-content {
		padding: 10px;
	}

    .widget-area,
    .content-area {
        display: block;
        margin-right: auto;
        margin-left: auto;
    }

    .comment-list .children {
		padding-left: 0;
	}

    .main-navigation {
        display: none;
    }

    .icon,
    .menu-toggle {
		display: block;
	}

    .widget select {
        display: block;
    }

    .site-main .navigation {
        padding: 0;
    }

    .footer-content {
        width: 100%;
        padding: 20px 0;
    }
    .footer-col {
        width: 100%;
        padding: 20px;
    }

}

@media screen and (max-width: 750px) { /* Mobile Devices Portrait */

    .site-branding {
        min-height: calc(90vh - 162px);
    }

}

@media screen and (min-width: 1024px) { /* Desktop */

    .site-info,
    .content-area,
    .site-branding,
    .footer-content {
        margin: 0 auto;
        padding: 20px;
        width: 1024px;
	}

    .site-main .navigation {
        padding: 0;
    }

    .site-branding {
        min-height: calc(110vh - 162px);
    }
    .two-columns .site-content {
        display: block;
        margin: 0 auto;
        max-width: 1280px;
        width: 90%
    }
    .two-columns .content-area {
        max-width: 890px;
        width: 68%;
    }
    .sidebar-primary {
        max-width: 360px;
        width: 30%;
    }

}

###試したこと
ネット検索の情報（https://yossense.com/css-for-smartphone/）を参考に、スタイルシート上記の最初に
@media screen and (max-width: 480px) {
p {
width : 100% ;
font-size : 65% ;
margin : 0 0 1.8em 0 ;
line-height : 1.7 ; }
}
↑を付け加えてみましたが何も変わりませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
表示したコードは、スタイルシートのレスポンシブ設定部分です。

Answer 1

https://wp-themes.com/studio/
↑を見た感じ、これで上手くいくかもなあ、と思いました。

@media screen and (max-width: 768px) {
   .site-content {
		padding: 0px;
	}
}

Comments

[megumihakata]

回答いただきありがとうございます。
無知で申し訳ないのですが、それをどこにどのように（どこかを削除して？）入れるのですか？

[Lhankor_Mhy]

質問文の「試したこと」に書いてあるところの最後に追加してみてください。

[megumihakata]

ありがとうございます、やってみたのですが、変わりませんでした。ご返信ありがとうございました。CSSを少し勉強してみたところ以前より読めたので、他にもいろいろ試したのですが・・・。もとのテーマにおおもとの設定があったりするのでしょうか、お手上げです(;_;)

[Lhankor_Mhy]

> やってみたのですが、変わりません
全く変わらない、というのは違和感あります。やり方が間違っているかもしれませんね。開発者ツールは使っていますか？

> もとのテーマにおおもとの設定があったりするのでしょうか
style.css の 24. Responsive design で padding:20px になってますね。
最後に追加すればそれを上書きするはずです。

[megumihakata]

重ねてのご返信ありがとうございます！恥ずかしながらデベロッパーツールを知りませんでした…ので、初めて使ってやってみました。 24. Responsive designの中で、教えていただいたメディアクエリを追加し、marginを0pxにしても変わらないので試しにmarginをマイナス値にしてみたら幅がなくなっていきまして…最終的にmargin -20pxで、ひとまず見た目ちょうど良いです。デベロッパーツール上の「Responsive」や「iPhone5」などで色々見てみたのですが問題なさそうでしたらこれで良いのでしょうか？

[Lhankor_Mhy]

とりあえず、見た目が問題なければそれで問題ないと思います。
マイナスマージンで上手くいくということは、親要素のpaddingの問題のような気もしますね。

Answer 2

コンテンツの周囲の余白だったら、body の margin, padding の設定で変更できませんか？

@media screen and (max-width: 768px) {
    body {
        padding: 0;
        margin: 0;
    }
}

みたいな感じで

Comments

[megumihakata]

ご回答いただきありがとうございます。試してみましたが変わりませんでした、、知識足らずで申し訳ないのですが、そもそもここでいうbodyで指定するところのHTMLってWordPressのどこにあるのでしょうか？該当部分の要素の名前がわかれば、それに対応するCSS部分を変更すれば良いということだと思うのですが（すみませんCSS本当に初心者で・・）、スマホ画面の投稿ページ本文の設定はbodyなのか .site-contentなのか.content-areaなのかはたまたどれなのかがハッキリせずにいます

[sysyz]

出力されている HTML のソースを見てみたらいかがでしょうか。
Tempalate によっても違うのかもしれませんし。
私が書いてるものならば、body タグに対して有効になるはずですから、class や id にかかわらず適用されるはずです。もし適用されないならば、ブラウザのデベロッパーツールなどでstyle の適用を確認してみると良いと思いますよ。

[megumihakata]

ご返信ありがとうございます、恥ずかしながらデベロッパーツールを使わずにやっていました…初めて使いました。デベロッパーツールでやってみたところ、paddingやmarginを0pxにしても変わらないので、試しにmarginをマイナス値にしてみたら幅がなくなっていったのですが…教えていただいたメディアクエリの中だけの指定で、最終的に、padding 0px、margin -20pxで、ひとまず見た目ちょうど良いです。マイナスっていう概念はあるのでしょうか。。？？？

[sysyz]

margin, padding は負数は有りですね。
でも、body の子要素の方に margin や padding が設定されているのではありませんか？
Dvelopers Tool で、いろんな DOM要素の ボックスモデルを見てみてください。
padding や margin が、どこぞの style のセレクタに設定してあるかもしれません。より強く影響する css selector を設定して、そこで margin: 0; padding:0 にすると良いかもしれませんね。