flexboxを用いて画像でスペースを空けたいです

img画像２つずつを横並びにして、間隔を空けたいのですができません。
justify-content:space-between;など試しましたが何も反応なしです
コード<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial=1">
<meta name="description" content="自己紹介">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="works.css">
<title>自己紹介</title>

<body>
    <header>
        <h2>WORKS</h2>
        <div class="container-list">
            <div class="container-icon">
                <div class="container-item">
                    <img src="image/html.png" alt="htmlアイコン">
                    <h3>HTML5＆CSS3</h3>
                    <p>HTML5&CSS3</p>
                </div>

                <div class="container-item">
                    <img src="image/respon.png" alt="レスポンシブ">
                    <h3>レスポンシブ</h3>
                    <p>レスポンシブ</p>
                </div>

                <div class="container-item">
                    <img src="image/java.png" alt="Javascript">
                    <h3>java script</h3>
                    <p>java script</p>
                </div>

                <div class="container-item">
                    <img src="image/note.png" alt="jQuery">
                    <h3>jQuery</h3>
                    <p>効果やアニメーション</p>
                </div>
            </div>

        </div>

    </header>

</body>

</html>

{
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}

header {
background-image: url(img/wall.jpg);
}

.container-list {
width: 780px;
height: 600px;
margin: 0 auto;
text-align: center;
}

.container-item {
padding-top: 5px;
margin-bottom: 100px;
border-radius: 20px;
width: 50%;
height: 240px;
border: 2px solid black;
flex: auto;
}

.container-icon {
display: flex;
flex-wrap: wrap;
}

.container-item>p {
font-family: serif;
font-size: 16px;
padding-right: 10px;
padding-left: 10px;
}

h2 {
text-align: center;
margin-bottom: 80px;
padding-top: 50px;
font-weight: normal;
}

h3 {
padding-top: 20px;
}

kuma_kuma_

2020/10/01 06:10

記載内容だと元が縦並びのようですがそれを変更したいという事ですか？あと画像のサイズを追記お願いします。

退会済みユーザー

2020/10/01 06:17

元は縦並びでしたが、.container-icon{display:flex;}で横並びにしました。さらに画像は全部で４つありますが、flex-wrap:wrap;で上下２つ並びにしました。その２つ並びの画像が隣同士今くっついているので、間を空けたいです。画像のサイズは、『386x231』ですよろしいでしょうか？

kuma_kuma_

2020/10/01 06:31 編集

残念ながらいまの質問にあるCSSにcontainer-item{width: 50%;}の設定の為横並び2列が再現できていません。(Firefox、chrome) もう一度ご確認できますか？すみませんがCSSもコードの挿入で囲むように記載してもらえますか？情報が欠損している恐れがあります。 ```CSS ```

退会済みユーザー

2020/10/01 06:40

ご回答ありがとうございます。初めに画像サイズ間違えてました。『64x64』でした。『386x231』は１つあたりのサイズでした。 CSSにcontainer-item{width: 50%;}の設定の為横並び2列が再現できていません。というのは width:50%が不要ということでしょうか？これを取り除くと、画像サイズが変になりました。一方で同じ中にある、flex:auto;を削除すると何も変化がないのでこれは不要かと思いました。

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

回答1件

ベストアンサー

質問者様がどのぐらい間隔を開けたいかが判りませんので
数値は適当に入れてあります。
調整はよろしくお願いします（※の箇所）

CSS
1.container-item {
2	padding-top: 5px;
3	margin-bottom: 100px;
4	border-radius: 20px;
5	height: 240px;
6	border: 2px solid black;
7	flex: auto;
8
9	width: 48%; /* ※ 変更 */
10	margin-left: 10px; /* ※ 追加 */
11	margin-right: 10px; /* ※ 追加 */
12}
13

投稿2020/10/01 06:50

kuma_kuma_

総合スコア2506

退会済みユーザー

2020/10/01 07:28

ご回答いただいた通り、変更・追加したところ、私の説明不足なところもありなぜか縦一列になりました。いろいろ試行錯誤してみて、margin-left:10px;を削除したところ真ん中に上下２列になりスペースもできました。ただ、仕組みを理解していないので、これから探っていきたいと思います。ありがとうございました。

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