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

Question

前提・実現したいこと

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>

body {
  margin:0;
  font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  background-color: #fff;
  color: #13191b;
  line-height: 1.7;
  font-size: 13px;
  letter-spacing:2px;
}

div {
  display:block;
}

li {
  list-style:none;
}

a {
  text-decoration:none;
}

header {
  background-image:url(img/main_visual_7-0x0.jpg);
  height:580px;
  display:flex;
  justify-content:space-between;
}

.header-left {
  margin-top:50px;
  margin-left:7%;
}

.header-left img {
  width:266px;
  height:72px;
}

.header-right { 
  display:flex;
  margin-top:80px;
  margin-right:7%;
}

.header-right li {
  margin-right:40px;
}

.header-right li :hover {
  border-bottom:2px solid white;
  padding-bottom:10px;
}

.header-right a {
  color:white;
}

.main {
  padding:110px 0;
  background-color:#f6f6f6;
}

.main > h1 {
  font-size:44px;
  font-weight:normal;
  text-align:center;
}

.main .container {
  margin:70px auto 0 auto;
  width:370px;
}

.main .container p {
  font-size:20px;
}

.paspol {
  text-align:center;
  font-size:35px;
}

.product {
  width:100%;
  margin:0 auto;
  margin-bottom:130px;
  padding-top:60px;
  padding-bottom:60px;
  margin:0 7%;
}

.product .container {
  max-width: 786px;
  padding:0 7%;
}

.product .title-more {
  padding-bottom:10px;
  display:flex;
  justify-content:space-between;
}

.title h1 {
  font-size:30px;
  font-weight:normal;
}

.more {
  line-height:100px;
}

.more a {
  color:black;
}

.more-btn {
  border:solid 1px black;
  padding:17px 60px;
  transition-property: background-color,color;
  transition-duration: 0.5s;
}

.more-btn:hover {
  background-color:black;
  color:white;
}

.pic {
  display:flex;
  flex-wrap:wrap;
}

.pic h1 {
  margin: 20px 0 0;
  padding: 0 20px;
  font-size: 20px;
}

.pic .pic-common {
  width:33.33333%;
  padding:0 15px;
  transition-property:opacity,color;
  transition-duration: 0.5s;
  box-sizing:content-box;
}

.pic .pic-common:hover {
  opacity:0.7;
}

.pic .pic-common h1 {
  color:black;
}

.pic .pic-common img{
  width: 100%;
  height: auto;
  vertical-align: top;
}

.news {
  width:100%;
  background-color:#f6f6f6;
  margin:0 auto;
  padding:0 7%;
}

.news .container {
  max-width:786px;
  padding:0 7%;
}

.news .title-more {
  padding-bottom:90px;
  display:flex;
  justify-content:space-between;
}

.pic-2 > .pic-common > img {
  width:325px;
  height:170px;
}

.pic-2 > .pic-common {
  padding-bottom:150px;
}

.share {
  display:flex;
  justify-content:center;
}

.share p {
  border:1px solid black;
  padding:17px;
  margin:35px 32px 35px 0;
  cursor:pointer;
}

.info {
  background-color:#939899;
  padding:40px;
}

.info .container {
  display:flex;
  justify-content:center;
}

.info .container a {
  color:white;
}

.info .container li {
  margin-right:40px;
}

.info .container li:hover {
  opacity:0.5;
}

footer {
  background-color:#656C6E;
  color:white;
  padding:35px 0;
}

footer .container {
  display:flex;
  justify-content:space-between;
  padding:0 20%;
}

footer img {
  width:90px;
}

footer small {
  margin-top:35px;
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>paspol模写</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <div class="header-left">
      <img src="./img/[e-mail]">
    </div>
    <div class="header-right">
      <li><a href="">TOP</a></li>
      <li><a href="">PRODUCT</a></li>
      <li><a href="">ABOUT</a></li>
      <li><a href="">NEWS</a></li>
      <li><a href="">CONTACT</a></li>
    </div>
  </header>

  <section class="main">
    <h1>旅に出よう。</h1>

    <div class="container">
    <p>僕たちが作りたいのは<br>
      持っているだけで旅に出たくなるモノ。<br>
      持っているだけでわくわくするモノ。
    </p>

    <p>それは新しい時代の “パスポート”<br>
        僕たちが作るものは、<br>
        そんな、存在でありたい。
    </p>

    <p>そして、人と人が繋がる<br>
        こんな時代だからこそ、<br>
        僕たちは、みんなでひとつのモノを<br>
        作ることを追求したい。
    </p>

    <h1 class="paspol">「 PAS-POL 」</h1>

    <p>それは、自分と世界を繋げる<br>
        旅のモノづくりブランド
    </p>
  </div>
  </section>

  <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>

  <article class="news">
    <div class="container">
      <div class="title-more">
        <div class="title">
          <h1>NEWS</h1>
        </div>
        <div class="more">
          <a href="" class="more-btn">MORE</a>
        </div>
      </div>
      <div class="pic-2">
        <div class="pic-inner-1 pic-common">
          <img src="img/アンケートアイキャッチ.jpg">
        </div>
  
        <div class="pic-inner-2 pic-common">
          <img src="img/写真バナー.jpg">
        </div>
  
        <div class="pic-inner-3 pic-common">
          <img src="img/pickup3_アートボード-1.jpg">
        </div>
  
        <div class="pic-inner-4 pic-common">
          <img src="img/僕が旅人になった日_new.jpg">
        </div>
  
        <div class="pic-inner-5 pic-common">
          <img src="img/pickup2_アートボード-1.jpg">
        </div>
  
        <div class="pic-inner-6 pic-common">
          <img src="img/pickup-02.jpg">
        </div>
  
      </div>
    </div>
  </article>

  <section class="share">
    <p class="facebook">Share on Facebook</p>
    <p class="twitter">Share on Twitter</p>
    <p class="bookmark">Hatena Bookmark</p>
  </section>

  <section class="info">
    <div class="container">
      <li><a href="">TOP</a></li>
      <li><a href="">PRODUCT</a></li>
      <li><a href="">ABOUT</a></li>
      <li><a href="">NEWS</a></li>
      <li><a href="">CONTACT</a></li>
    </div>
  </section>

  <footer>
    <div class="container">
      <img src="img/[e-mail]">
      <small>Copyright © 2019 PAS-POL -旅のモノづくりブランド-｜TABIPPO All rights reserved.</small>
    </div>
  </footer>
</body>
</html>

試したこと

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

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

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

Comments

[kei344]

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

[blacksmoke]

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

Answer 1

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

Comments

[blacksmoke]

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

[kei344]

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

https://jsfiddle.net/pczshegf/show/

[blacksmoke]

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