レスポンシブで左右幅が綺麗に等分にならない

前提・実現したいこと

レスポンシブで、左右幅が綺麗に等分にならずアンバランスになってしまいます。
これを左右同じ余白を持たせたいです。

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

ipad版での左右幅が等分にならない。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1">
7 <link rel="stylesheet" href="css/reset.css">
8 <link rel="stylesheet" href="css/style.css">
9 <link rel="stylesheet" href="css/responsive.css">
10 <title>クリスタ　初級</title>
11</head>
12
13<body>
14 <header>
15
16  <div class="header-menu">
17   <h1 class="header-left">クリ★スタ</h1>
18   <ul class="header-top">
19    <li><a href="#">About</a></li>
20    <li><a href="#">Service</a></li>
21    <li><a href="#">Contents</a></li>
22   </ul>
23  </div>
24  <div class="header-image">
25   <div class="kv-copy">
26    <h1>Cresta Design.</h1>
27   </div>
28  </div>
29 </header>
30
31 <main>
32  <section>
33   <div class="container">
34
35    <h2 class="section-title">About</h2>
36    <div class="top-text">
37     <h3>ミニマルで<br>洗練されたデザインを。</h3>
38     <p>近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行なった上でご提案させて頂きます。</p>
39    </div>
40   </div>
41  </section>
42  <section>
43   <div class="container">
44    <h2 class="section-title">Service</h2>
45    <ul class="service-list">
46     <li class="service-item">
47      <div class="service-image">
48       <img src="img/service-image@2x.jpg">
49      </div>
50      <div class="service-text left">
51
52       <h3>リリース時のサポートで<br>サービスのブランディングを</h3>
53       <p>弊社では、リリース時もサポートさせて頂きます。プレスリリース用のサイトや動画制作を通して、サービスのブランディングを行わせて頂きます。</p>
54      </div>
55
56     </li>
57     <li class="service-item">
58
59      <div class="service-text right">
60       <h3>リリース後のサポートで<br>効果を最大化させる</h3>
61       <p>弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に様々な課題にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を最大化させます。</p>
62      </div>
63      <div class="service-image">
64       <img src="img/service-image02@2x.jpg">
65      </div>
66     </li>
67    </ul>
68   </div>
69  </section>
70
71  <section>
72   <div class="container">
73    <h2 class="section-title">News</h2>
74    <ul class="card-list">
75     <li class="card-item">
76      <a href="#!">
77       <div class="card-image">
78        <img src="img/card-image1@2x.jpg">
79       </div>
80       <p class="card-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
81      </a>
82     </li>
83     <!--クラス名がclass= でなく div=　だったためにcssがきかなかった-->
84     <li class="card-item">
85      <a href="#!">
86       <div class="card-image">
87        <img src="img/card-image2@2x.jpg">
88       </div>
89       <p class="card-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
90      </a>
91     </li>
92
93     <li class="card-item">
94      <a href="#!">
95       <div class="card-image">
96        <img src="img/card-image3@2x.jpg">
97       </div>
98       <p class="card-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
99      </a>
100     </li>
101    </ul>
102   </div>
103  </section>
104
105  <section>
106   <div class="container">
107
108    <h3 class="section-contact">お問い合わせ</h3>
109    <ul class="contact-list">
110     <li class="contact-item">
111      <p>担当者名</p>
112      <input type="text">
113     </li>
114     <li class="contact-item">
115      <p>電話番号</p>
116      <input type="text">
117     </li>
118     <li class="contact-item">
119      <p>メールアドレス</p>
120      <input type="text">
121     </li>
122     <li class="contact-item">
123      <p>お問い合わせ内容</p>
124      <textarea></textarea>
125     </li>
126
127
128    </ul>
129   </div>
130   <div class="form-send">
131    <input class="form-btn" type="送信" value="送信">
132   </div>
133  </section>
134 </main>
135
136
137
138
139
140
141 <footer>
142
143  <p>©︎crest.design all rights reserved</p>
144
145 </footer>
146</body>
147
148</html>
149

該当のソースコード（スタイル）

CSS
1@charset "UTF-8";
2/*共通レイアウト*/
3html {
4  font-family: "Roboto", sans-serif, "Noto Sans CJK JP", sans-serif;
5  /*フォント書き方*/
6  font-size: 0.875rem;
7  /*font-size: 14px;*/
8  /* width: 100%;*/
9  line-height: 1.8;
10  /*line-height: 48;*/
11  letter-spacing: 0.05em;
12  width: 100%;
13  /*h3だけでまとめておく*/
14}
15html img {
16  max-width: 100%;
17  vertical-align: bottom;
18}
19html h3 {
20  font-size: 1.4rem;
21  font-weight: bold;
22  line-height: 2;
23  letter-spacing: 0.1em;
24  margin-bottom: 40px;
25}
26html .container {
27  width: 70.625rem;
28  margin: 0 auto;
29  /*padding: 0 120px;*/
30  /*↑これがあってキャッチコピーはど真ん中だが全体がずれてたために*/
31  padding: 100px 10% 50px;
32}
33html .container .section-title {
34  /* width: 100%;*/
35  font-size: 3.6rem;
36  /* padding-top: 100px;*/
37  padding-bottom: 70px;
38  font-weight: bold;
39  /* line-height: 1.5rem;*/
40  letter-spacing: 0.05em;
41  text-align: center;
42  /*.list {
43   width: 64.3rem;*/
44}
45
46/*ヘッダー*/
47header {
48  color: #FFFFFF;
49  background-color: #141414;
50  line-height: 1.3rem;
51  /*padding: 0 10% 0;*/
52}
53header .header-menu {
54  display: flex;
55  padding: 0 120px;
56  justify-content: space-between;
57  /*リスト欄が端による*/
58  width: 1130px;
59  margin: 0 auto;
60}
61header .header-menu .header-left {
62  font-size: 26px;
63  line-height: 20px;
64  text-align: left;
65  padding: 20px 0;
66}
67header .header-menu .header-top {
68  display: flex;
69  text-align: right;
70}
71header .header-menu .header-top li {
72  padding-top: 1.56rem;
73  padding-right: 55px;
74  align-items: end;
75}
76header .header-menu .header-top li a {
77  text-decoration: none;
78  color: #FFFFFF;
79}
80
81.header-image {
82  background-image: url(../img/fv-bgi@2x.jpg);
83  background-size: cover;
84  width: 100%;
85}
86.header-image .kv-copy {
87  padding: 302px 0;
88  font-size: 36px;
89  text-align: center;
90}
91.header-image .kv-copy h1 {
92  border: 2px solid #FFFFFF;
93  margin: 0 auto;
94  width: 449px;
95  line-height: 136px;
96  text-align: center;
97  width: 1005;
98}
99
100/*アバウト*/
101.top-text {
102  /*text-align: left;*/
103  font-weight: bold;
104}
105.top-text p {
106  line-height: 38px;
107  width: 1030px;
108}
109
110/*サービス*/
111.service-list {
112  text-align: center;
113  margin: 0 auto;
114  width: 64.3rem;
115}
116.service-list .service-item {
117  padding-bottom: 50px;
118  display: flex;
119  /* flex-direction: row-reverse;*/
120  font-weight: bold;
121  /*justify-content: space-between;*/
122  /* align-items: center;*/
123  /* text-align: center;*/
124  margin: 0 auto;
125}
126.service-list .service-item p {
127  line-height: 30px;
128  width: 480px;
129}
130.service-list .service-item .left {
131  text-align: left;
132  margin-left: 70px;
133}
134.service-list .service-item .left p {
135  width: 480px;
136}
137.service-list .service-item .right {
138  text-align: left;
139  padding-right: 70px;
140}
141.service-list .service-item .right p {
142  width: 480px;
143}
144
145/*ニュース*/
146/*.card-list {
147
148 .card-item {
149  margin: 50px 0 0;
150
151  .card-image {
152   width: 100%;
153  }
154
155  .card-text 
156  /* width: 240px;*/
157.card-list {
158  /*text-align: center;*/
159  display: flex;
160  /*width: 320px;*/
161  /*真ん中に詰まってしまうから不要*/
162  /*justify-content: space-between;*/
163  align-items: center;
164}
165.card-list .card-item {
166  margin: 50px 0 0;
167  /*コンテンツ間の余白*/
168  text-align: center;
169  /*コンテンツがすべて*/
170  box-shadow: 0px 0px rgba(27, 19, 16, 0.4);
171  margin-right: 35px;
172  border: 1px solid #1B131066;
173}
174.card-list .card-item .card-image {
175  text-align: center;
176}
177.card-list .card-item .card-text {
178  width: 225px;
179  text-align: left;
180  display: inline-block;
181  color: #141414;
182  padding: 25px 30px;
183  line-height: 1.56;
184}
185.card-list .card-item:last-of-type {
186  padding-right: 0px;
187}
188
189/*お問い合わせ*/
190.section-contact {
191  font-size: 1.5rem;
192  padding-bottom: 93px;
193  padding-top: 152px;
194  font-weight: bold;
195  text-align: center;
196}
197
198.contact-list {
199  width: 700px;
200  margin: 0 auto;
201}
202.contact-list p {
203  text-align: left;
204  padding-bottom: 3px;
205  width: 700px;
206}
207.contact-list input {
208  width: 700px;
209  margin-bottom: 20px;
210}
211.contact-list textarea {
212  width: 700px;
213  height: 171px;
214}
215
216/*ボタン*/
217.form-send {
218  text-align: center;
219  margin-top: 50px;
220}
221.form-send .form-btn {
222  /*display: inline-block;
223  */
224  text-align: center;
225  color: #FFFFFF;
226  background-color: #141414;
227  border-radius: 3.18em;
228  padding: 1rem 0.7rem;
229  font-size: 1.25rem;
230  margin-bottom: 3.12rem;
231  /**/
232}
233
234/*.btn {
235 display: inline-block;
236 background-color: $black;
237 color: $white;
238 line-height: 30;
239 text-decoration: none;
240 border-radius: 51px;
241 margin: 0 auto;
242 padding: 1rem 6rem;
243 width: 235px;
244
245
246 a {
247  font-size: 1.25rem;
248  display: inline-block;
249  text-align: center;
250
251 }
252}
253*/
254/*フッター*/
255footer {
256  color: #FFFFFF;
257  background-color: #141414;
258  padding: 1.81rem;
259  text-align: center;
260}

該当のソースコード（レスポンシブ）

CSS
1/*レスポンシブ*/
2
3/*タブレット*/
4
5@media screen and (max-width:1100px) {
6 html {
7  font-size: 1vw;
8  width: 100%;
9 }
10
11
12
13 html .container {
14  width: 50%;
15
16
17
18
19 }
20
21 header .header-menu {
22  width: 50%;
23
24  padding: 0 60px;
25 }
26
27 header .header-menu .header-left {
28  font-size: 2vw;
29 }
30
31 .header-image .kv-copy {
32  width: 100%;
33 }
34
35 /*ヘッダー部*/
36 .top-text h3 {
37  text-align: center;
38 }
39
40
41 .top-text p {
42  width: 70%;
43  margin: 0 auto;
44  /*どまんなかに*/
45  text-align: center;
46  /*文字が中央寄せ書き*/
47 }
48
49
50 /*アバウト部*/
51
52
53
54
55 /*サービス部*/
56
57 .service-list {
58  width: 50%;
59  margin: 0 auto;
60 }
61
62 /*ニュース*/
63 .card-list {
64  display: block;
65  text-align: center;
66 }
67
68 .card-list .card-item .card-image img {
69  width: 100%;
70 }
71
72 .card-list .card-imte .card-text {
73  padding: 0;
74 }
75
76
77 /*お問い合わせ*/
78
79 .contact-list .contact-item input {
80  width: 50%;
81 }
82
83 .contact-list .contact-item textarea {
84  width: 50%;
85 }
86
87 footer {
88  width: 100%;
89 }
90