文字の左右に余白を作りたい。

実現したいこと
長文の左右に余白を開けたいのですが上手くいきません。

該当箇所はHTMLのコードのITイノベーションと書いてあるところの下の文章、テキストテキスト・・・・の文章の所なのですが、

CSSコードの該当箇所はsection#about4 {・・・の所になります。

section pというcssにありますが、背景が無い文字として使用するので、section#about4でクラスを別につけています。

試したこと
section#about4 {・・・
にmargin-left right 10px適応すると文書が真ん中いかず、白い背景が現れてしまいます。
Paddingも同様です。

width80%に変更しても左右に余白が空きません。

どうしたらよいでしょうか？困っています。
回答よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<meta name="robots" content="noindex,nofollow">
6	<title></title>
7
8	<meta http-equiv="X-UA-Compatible" content="IE=edge">
9	
10   
11    <link rel="stylesheet" href="companyhp2.css">
12  	<script src="jquery-3.6.0.min.js"></script>
13    <style type="text/css">
14/* レスポンシブ対応で右に出る謎の余白を無くす */
15.wrapper {
16     overflow: hidden;
17 }
18
19
20      
21
22    </style>
23
24
25
26<script>
27		$(function() {
28			const hum = $('#hamburger, .close')
29			const nav = $('.sp-nav')
30			hum.on('click', function(){
31				nav.toggleClass('toggle');
32			});
33		});
34	  </script>
35</head>
36<body>
37<!--wrapperレスポンシブ対応で右に出る謎の余白を無くすbody全体に適応-->
38<div class="wrapper">
39
40
41
42    <section id="about3">
43        <div class="slide-bottom show">ITイノベーション<span></span></div>
44    </section>    
45    
46    <section id="about4">
47        <p class="slide-bottom show">テキストテキストテキストテキストテキストテキスト
48テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
49テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
50テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
51テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
52
53         
54        </p>
55    </section>
56<section id="service">
57    <h1 class="slide-bottom show">会社の4つのMission<span></span></h1>
58    <div>
59        <div class="icon_list">
60            <ul class="flex2">
61                <li class="slide-left show"><img src="icon_hearing.png" alt="改善"><p>改善</p></li>
62                <li class="slide-left show"><img src="icon_marketing.png" alt="開発"><p>開発</p></li>
63                <li class="slide-left  show"><img src="icon_planning.png" alt="向上"><p>向上</p></li>
64                <li class="slide-left  show"><img src="icon_support.png" alt="サポート"><p>サポート</p></li>
65            </ul>
66        </div>
67        <p class="slide-right show">ありがとうございます。ありがとうございます。</p>
68    </div>
69    </section>
70   <script>
71       //フェードイン用のコードです
72	$(function(){
73		$(window).on('load scroll', function() {
74			$(".show").each(function() {
75				var winScroll = $(window).scrollTop();
76				var winHeight = $(window).height();
77				var scrollPos = winScroll + (winHeight * 0.9);
78				if($(this).offset().top < scrollPos) {
79					$(this).css({opacity: 1, transform: 'translate(0, 0)'});
80				}
81			});
82		});
83	});
84	//フェードイン用のコードはここまでです
85
86
87</script>
88
89</div>
90</body>
91</html>

css
1section {
2	overflow: hidden;
3	text-align: center;
4	padding: 1px 0;
5}
6section div {
7  color:#0212f8;
8  font-size: 39px;
9  font-weight: 600;
10  vertical-align: -40px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */
11  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
12  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
13  text-align: center;/* ブロック要素のみしか本来適応できない */
14}
15section p {
16  color:#7c7878;
17  font-size: 27px;
18  font-weight: 400;
19  vertical-align: -20px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */
20  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
21  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
22  text-align: center;/* ブロック要素のみしか本来適応できない */
23  line-height:50px;/* 文字の行間の調節 */
24
25}
26/* sectionタグのaboutにのみ背景を適応　class idは#で記述すつ */
27section#about3 {
28  overflow: hidden;
29  text-align: center;
30  padding: 10px 0;
31  background-color: rgb(196, 245, 252);/* sectionタグ内に背景を設定 */
32  color:#0212f8;
33  font-size: 39px;
34  font-weight: 600;
35  vertical-align: -40px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */
36  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
37  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
38  text-align: center;/* ブロック要素のみしか本来適応できない */
39
40
41  }
42
43/* sectionタグのaboutにのみ背景を適応　class idは#で記述すつ */
44section#about4 {
45  color:#7c7878;
46  font-size: 27px;
47 
48  vertical-align: -20px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */
49  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
50  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
51  text-align: center;/* ブロック要素のみしか本来適応できない */
52  line-height:50px;/* 文字の行間の調節 */
53  background-color: rgb(196, 245, 252);/* sectionタグ内に背景を設定 */
54
55text-align: justify;/* 両端揃え */
56text-justify: inter-ideograph;/* 両端揃えの種類 *//* 均等振り分け（日本語向き）文字の端を揃える */
57 
58
59}
60

Lhankor_Mhy

2021/08/11 06:58

『該当箇所はHTMLのコードのITイノベーションと書いてあるところの下の文章、テキストテキスト・・・・の文章の所』とあり、『CSSコードの該当箇所はsection#about3 {』とありますが、テキストテキスト・・・・の部分は、section#about4 だと思いますが、なにかお間違えではないですか？