子要素を横に任意の数並べたい

前提・実現したいこと

PRODUCTのセクションの部分全体が左にずれているので真ん中にくるようにしたいです。
PRODUCTのセクションの写真と説明の部分を同じ行に三個均等に置きたいです。

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

該当のソースコード

<section class="product">
    <div class="container">
      <div class="title-more">
        <div class="title">
          <h1>PRODUCT</h1>
        </div>
        <div class="more">
          <a href="" class="more-btn">MORE</a>
        </div>
      </div>
      <div class="pic">
          <div class="pic-common">
            <a href="">
              <img src="img/fes001t.png">
              <h1>The World<br>Festial Guide - 海外の音楽フェス完全ガイド -</h1>
            </a>
          </div>
          <div class="pic-common">
            <a href="">
              <img src="img/banner_サムネイル21.png">
              <h1>この世界で死ぬまでにしたいこと2000</h1>
            </a>
          </div>
          <div class="pic-common">
            <a href="">
              <img src="img/365日本カレンダー_サムネイル1.png">
              <h1>365日日本一周　絶景日めくりカレンダー</h1>
            </a>
          </div>
          <div class="pic-common">
            <a href="">
              <img src="img/passportnotebook-thumb11.png">
              <h1>PASSPORT<br>NOTEBOOK<br>series</h1>
            </a>
          </div>
          <div class="pic-common">
            <a href="">
              <img src="img/englishbook-thumb11.png">
              <h1>ひとり旅英会話<br>BOOK</h1>
            </a>
          </div>
          <div class="pic-common">
            <a href="">
              <img src="img/212465b615e458e672a9e0a1cbb1acf1.jpg">
              <h1>日本の絶景ポストカード　春編</h1>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

css
1body {
2  margin:0;
3  font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
4  background-color: #fff;
5  color: #13191b;
6  line-height: 1.7;
7  font-size: 13px;
8  letter-spacing:2px;
9}
10
11div {
12  display:block;
13}
14
15li {
16  list-style:none;
17}
18
19a {
20  text-decoration:none;
21}
22
23header {
24  background-image:url(img/main_visual_7-0x0.jpg);
25  height:580px;
26  display:flex;
27  justify-content:space-between;
28}
29
30.header-left {
31  margin-top:50px;
32  margin-left:7%;
33}
34
35.header-left img {
36  width:266px;
37  height:72px;
38}
39
40.header-right { 
41  display:flex;
42  margin-top:80px;
43  margin-right:7%;
44}
45
46.header-right li {
47  margin-right:40px;
48}
49
50.header-right li :hover {
51  border-bottom:2px solid white;
52  padding-bottom:10px;
53}
54
55.header-right a {
56  color:white;
57}
58
59.main {
60  padding:110px 0;
61  background-color:#f6f6f6;
62}
63
64.main > h1 {
65  font-size:44px;
66  font-weight:normal;
67  text-align:center;
68}
69
70.main .container {
71  margin:70px auto 0 auto;
72  width:370px;
73}
74
75.main .container p {
76  font-size:20px;
77}
78
79.paspol {
80  text-align:center;
81  font-size:35px;
82}
83
84.product {
85  width:100%;
86  margin:0 auto;
87  margin-bottom:130px;
88  padding-top:60px;
89  padding-bottom:60px;
90  margin:0 7%;
91}
92
93.product .container {
94  max-width: 786px;
95  padding:0 7%;
96}
97
98.product .title-more {
99  padding-bottom:10px;
100  display:flex;
101  justify-content:space-between;
102}
103
104.title h1 {
105  font-size:30px;
106  font-weight:normal;
107}
108
109.more {
110  line-height:100px;
111}
112
113.more a {
114  color:black;
115}
116
117.more-btn {
118  border:solid 1px black;
119  padding:17px 60px;
120  transition-property: background-color,color;
121  transition-duration: 0.5s;
122}
123
124.more-btn:hover {
125  background-color:black;
126  color:white;
127}
128
129.pic {
130  display:flex;
131  flex-wrap:wrap;
132}
133
134.pic h1 {
135  margin: 20px 0 0;
136  padding: 0 20px;
137  font-size: 20px;
138}
139
140.pic .pic-common {
141  width:33.33333%;
142  padding:0 15px;
143  transition-property:opacity,color;
144  transition-duration: 0.5s;
145  box-sizing:content-box;
146}
147
148.pic .pic-common:hover {
149  opacity:0.7;
150}
151
152.pic .pic-common h1 {
153  color:black;
154}
155
156.pic .pic-common img{
157  width: 100%;
158  height: auto;
159  vertical-align: top;
160}
161
162.news {
163  width:100%;
164  background-color:#f6f6f6;
165  margin:0 auto;
166  padding:0 7%;
167}
168
169.news .container {
170  max-width:786px;
171  padding:0 7%;
172}
173
174.news .title-more {
175  padding-bottom:90px;
176  display:flex;
177  justify-content:space-between;
178}
179
180.pic-2 > .pic-common > img {
181  width:325px;
182  height:170px;
183}
184
185.pic-2 > .pic-common {
186  padding-bottom:150px;
187}
188
189.share {
190  display:flex;
191  justify-content:center;
192}
193
194.share p {
195  border:1px solid black;
196  padding:17px;
197  margin:35px 32px 35px 0;
198  cursor:pointer;
199}
200
201.info {
202  background-color:#939899;
203  padding:40px;
204}
205
206.info .container {
207  display:flex;
208  justify-content:center;
209}
210
211.info .container a {
212  color:white;
213}
214
215.info .container li {
216  margin-right:40px;
217}
218
219.info .container li:hover {
220  opacity:0.5;
221}
222
223footer {
224  background-color:#656C6E;
225  color:white;
226  padding:35px 0;
227}
228
229footer .container {
230  display:flex;
231  justify-content:space-between;
232  padding:0 20%;
233}
234
235footer img {
236  width:90px;
237}
238
239footer small {
240  margin-top:35px;
241}
242
243
244
245

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>paspol模写</title>
7  <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10  <header>
11    <div class="header-left">
12      <img src="./img/siteLogo-pc@2x.png">
13    </div>
14    <div class="header-right">
15      <li><a href="">TOP</a></li>
16      <li><a href="">PRODUCT</a></li>
17      <li><a href="">ABOUT</a></li>
18      <li><a href="">NEWS</a></li>
19      <li><a href="">CONTACT</a></li>
20    </div>
21  </header>
22
23  <section class="main">
24    <h1>旅に出よう。</h1>
25
26    <div class="container">
27    <p>僕たちが作りたいのは<br>
28      持っているだけで旅に出たくなるモノ。<br>
29      持っているだけでわくわくするモノ。
30    </p>
31
32    <p>それは新しい時代の “パスポート”<br>
33        僕たちが作るものは、<br>
34        そんな、存在でありたい。
35    </p>
36
37    <p>そして、人と人が繋がる<br>
38        こんな時代だからこそ、<br>
39        僕たちは、みんなでひとつのモノを<br>
40        作ることを追求したい。
41    </p>
42
43    <h1 class="paspol">「 PAS-POL 」</h1>
44
45    <p>それは、自分と世界を繋げる<br>
46        旅のモノづくりブランド
47    </p>
48  </div>
49  </section>
50
51  <section class="product">
52    <div class="container">
53      <div class="title-more">
54        <div class="title">
55          <h1>PRODUCT</h1>
56        </div>
57        <div class="more">
58          <a href="" class="more-btn">MORE</a>
59        </div>
60      </div>
61      <div class="pic">
62          <div class="pic-common">
63            <a href="">
64              <img src="img/fes001t.png">
65              <h1>The World<br>Festial Guide - 海外の音楽フェス完全ガイド -</h1>
66            </a>
67          </div>
68          <div class="pic-common">
69            <a href="">
70              <img src="img/banner_サムネイル21.png">
71              <h1>この世界で死ぬまでにしたいこと2000</h1>
72            </a>
73          </div>
74          <div class="pic-common">
75            <a href="">
76              <img src="img/365日本カレンダー_サムネイル1.png">
77              <h1>365日日本一周　絶景日めくりカレンダー</h1>
78            </a>
79          </div>
80          <div class="pic-common">
81            <a href="">
82              <img src="img/passportnotebook-thumb11.png">
83              <h1>PASSPORT<br>NOTEBOOK<br>series</h1>
84            </a>
85          </div>
86          <div class="pic-common">
87            <a href="">
88              <img src="img/englishbook-thumb11.png">
89              <h1>ひとり旅英会話<br>BOOK</h1>
90            </a>
91          </div>
92          <div class="pic-common">
93            <a href="">
94              <img src="img/212465b615e458e672a9e0a1cbb1acf1.jpg">
95              <h1>日本の絶景ポストカード　春編</h1>
96            </a>
97          </div>
98        </div>
99      </div>
100    </div>
101  </section>
102
103  <article class="news">
104    <div class="container">
105      <div class="title-more">
106        <div class="title">
107          <h1>NEWS</h1>
108        </div>
109        <div class="more">
110          <a href="" class="more-btn">MORE</a>
111        </div>
112      </div>
113      <div class="pic-2">
114        <div class="pic-inner-1 pic-common">
115          <img src="img/アンケートアイキャッチ.jpg">
116        </div>
117  
118        <div class="pic-inner-2 pic-common">
119          <img src="img/写真バナー.jpg">
120        </div>
121  
122        <div class="pic-inner-3 pic-common">
123          <img src="img/pickup3_アートボード-1.jpg">
124        </div>
125  
126        <div class="pic-inner-4 pic-common">
127          <img src="img/僕が旅人になった日_new.jpg">
128        </div>
129  
130        <div class="pic-inner-5 pic-common">
131          <img src="img/pickup2_アートボード-1.jpg">
132        </div>
133  
134        <div class="pic-inner-6 pic-common">
135          <img src="img/pickup-02.jpg">
136        </div>
137  
138      </div>
139    </div>
140  </article>
141
142  <section class="share">
143    <p class="facebook">Share on Facebook</p>
144    <p class="twitter">Share on Twitter</p>
145    <p class="bookmark">Hatena Bookmark</p>
146  </section>
147
148  <section class="info">
149    <div class="container">
150      <li><a href="">TOP</a></li>
151      <li><a href="">PRODUCT</a></li>
152      <li><a href="">ABOUT</a></li>
153      <li><a href="">NEWS</a></li>
154      <li><a href="">CONTACT</a></li>
155    </div>
156  </section>
157
158  <footer>
159    <div class="container">
160      <img src="img/siteLogo-small@2x.png">
161      <small>Copyright © 2019 PAS-POL -旅のモノづくりブランド-｜TABIPPO All rights reserved.</small>
162    </div>
163  </footer>
164</body>
165</html>

試したこと

子要素の幅を33%にして三つ並べようとしましたが収まりませんでした。
親要素をmargin:0 auto;にしましたが少し左にずれてしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2019/10/21 13:46

（質問文は編集できます）CSSもコードブロックで囲んでいただけませんか？PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

blacksmoke

2019/10/21 13:57

指摘ありがとうございます。修正しました。

行動規範の内容に同意します

回答1件

ベストアンサー

box-sizing:content-box; ⇒ box-sizing: border-box; 。
content-box はpaddingを含みませんので、33.33333%+15px ×2 の幅になります。

投稿2019/10/21 14:04

kei344

総合スコア69596

blacksmoke

2019/10/21 14:14

回答ありがとうございます。助かります。できればセクションが少し左にずれている原因も教えていただけませんか？

kei344

2019/10/21 14:23

一番の問題は .header-right の内包要素が右にはみ出して全体を押しているからだとおもいます。あとは .container に max-width が設定されているのに左右marginに auto が設定されていないからです。 https://jsfiddle.net/pczshegf/show/

blacksmoke

2019/10/21 15:05

解決することができました。ありがとうございました。

行動規範の内容に同意します