flex:wrapでのレイアウトのズレを直したいです

１枚目の画像のように回り込んだ場合綺麗に真ん中に揃えたいのですが、２枚目、３枚目のように微妙にブロックがズレてしまいます。（１枚目見本、２、３枚目が自分で模写しているものです）

３枚目の画像の通り横並びの状態でも微妙に右に余白が多くなってしまっています。

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.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.cs">
9    <link rel="stylesheet" href="./sass/style.css">
10    <script type="text/javascript"  src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
11    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
12</head>
13<body>
14<div class="servic-contents">
15        <div class="servic-contents1">
16            <div class="contents1 contentsex">
17                <h1>ノマドエンジニア育成口座<br>iSara[イサラ]とは</h1>
18            </div>
19            <p>「稼ぐこと」にフォーカスしたエンジニア育成講座です。</p>
20        </div>
21        <div class="product">
22            <h2>稼げるエンジニアに必要な５つのスキルとは？</h2>
23            <div class="product-contents">
24                <div class="product-item proitem">
25                    <img src="../img/skill.jpg" alt="">
26                    <p>基礎的な<br>プログラミングスキル</p>
27                </div>
28                <div class="product-item proitem2">
29                    <img src="../img/sales.jpg" alt="">
30                    <p>案件獲得に必要な<br>営業力</p>
31                </div>
32                <div class="product-item">
33                    <img src="../img/document.jpg" alt="">
34                    <p>見積もり作成から<br>納品までの知識</p>
35                </div>
36                <div class="product-item">
37                    <img src="../img/plusone.jpg" alt="">
38                    <p>自分の付加価値を<br>高めるスキル</p>
39                </div>
40                <div class="product-item">
41                    <img src="../img/connection.jpg" alt="">
42                    <p>フリーランス同士の<br>横のつながり</p>
43                </div>
44            </div>
45        </div>
46    </div>
47</body>
48</html>

css
1.servic-contents{
2    height: auto;
3    margin: 0 auto;
4    width: 100%;
5    background-color: #FEF5E1;
6    padding: 0px 0px 60px 0px;
7}
8.servic-contents1{
9    width: 100%;
10    margin: 0 auto;
11    text-align: center;
12    padding: 100px 0px 20px 0px;
13
14    p{
15        padding-top: 60px;
16        font-size: 20px;
17    }
18
19}
20
21.contentsex{
22    margin: 0 auto;
23    height: 150px;
24    h1{
25        padding-top: 30px;
26    }
27}
28
29.product{
30    width: 1140px;
31    margin: 0 auto;
32    height: auto;
33    border: 2px solid #EBB94D;
34    background-color: #ffffff;
35    border-radius: 4px;
36    padding-bottom: 30px;
37    h2{
38        text-align: center;
39        padding: 30px 0px;
40    }
41}
42
43.product-contents{
44    width: 100%;
45    margin: 0 auto;
46    display: flex;
47    flex-wrap: wrap;
48    text-align: center;
49    justify-content: center;
50    align-items: center;
51    border: 1px solid black;
52
53    p{
54        font-size: 13px;
55        color: #333333;
56        padding-top: 10px;
57        
58    }
59    .product-item{
60        border: 1px solid black;
61        margin: 10px 10px;
62        border: 1px solid blck;
63        width: 200ps;
64    }
65    .proitem2{
66        margin-top: 0px;
67    }
68}
69
70
71

宜しくお願い致します。

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

回答1件

ベストアンサー

bodyの開始タグが無い、divが始まっていない。

HTML
1</head>div class="servic-contents">

提示のコードで上記を修正したら再現しないので、そこか提示箇所以外かに問題があるかどちらかだと思います。

動くサンプル：https://jsfiddle.net/6jt4nq8f/

投稿2019/05/03 17:49

kei344

総合スコア69398

mimuratakasi

2019/05/03 17:58

ご指摘の部分はコピペミスで実際はbodyの開始タグはあります。本文訂正しました。

kei344

2019/05/03 18:01

https://jsfiddle.net/6jt4nq8f/show/ 問題が再現しないので、どこかのコピペミスでしょう。

mimuratakasi

2019/05/03 18:12

コピペミスはないのですが、確かにこの部分だけですと問題が起きませんでした。他のブロックが原因かもしれませんのが確認後、解決策が見つからないようでしたら改めてご質問致します。ご回答ありがとうございます。

mimuratakasi

2019/05/03 19:13

ご回答頂いたことをヒントに他の要素を見直してみたところ解決できました。他の要素につけた::before,afterがなぜか適応されており、 beforeをつけている要素を親要素の入れ子にしてCSSを記述したところ改善しました。ご回答ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

flex:wrapでのレイアウトのズレを直したいです

関連した質問