ブラウザの幅を変えても要素の位置が変わらないようにしたい

ブラウザの幅を変えると要素間が離れてしまいます（画像のように）
中央寄せにした上で、離れないようにするにはどうすればいいのでしょうか？

画像①ブラウザ最大化状態

画像②ブラウザの幅を小さくするとこうなってしまう状態

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    <link rel="stylesheet" href="../../tools/style/reset.css" />
8    <link rel="stylesheet" href="./assets/stylesheets/style.css" />
9    <title>pc-site</title>
10  </head>
11  <body>
12    <div class="l-wrapper">
13      <header class="l-header">
14        <img class="l-header__logo" src="./assets/images/logo.png" alt="ロゴ">
15        <nav>
16          <ul class="p-nav__menu">
17            <li class="p-nav__list">
18              <a href="" class="p-nav__button">home</a>
19            </li>
20            <li class="p-nav__list">
21              <a href="" class="p-nav__button">about</a>
22            </li>
23            <li class="p-nav__list">
24              <a href="" class="p-nav__button">access</a>
25            </li>
26            <li class="p-nav__list">
27              <a href="" class="p-nav__button">contact</a>
28            </li>
29          </ul>
30        </nav>
31      </header>
32      <div class="c-hero"></div>
33      <main class="l-main">
34        <h1 class="l-main__title">PC カリキュラム</h1>
35        <div class="l-contents">
36          <section class="p-gallery">
37            <h2 class="p-gallery__tilte">最新の作品</h2>
38            <ul class="p-gallery__menu">
39              <li class="p-gallery__list">
40                <img class="p-gallery__photo" src="./assets/images/production_01.jpg" alt="夕焼けと海">
41              </li>
42              <li class="p-gallery__list">
43                <img class="p-gallery__photo" src="./assets/images/production_02.jpg" alt="砂浜と貝殻">
44              </li>
45              <li class="p-gallery__list">
46                <img class="p-gallery__photo" src="./assets/images/production_03.jpg" alt="砂浜とドリンク">
47              </li>
48              <li class="p-gallery__list">
49                <img class="p-gallery__photo" src="./assets/images/production_04.jpg" alt="桟橋">
50              </li>
51              <li class="p-gallery__list">
52                <img class="p-gallery__photo" src="./assets/images/production_05.jpg" alt="小船">
53              </li>
54              <li class="p-gallery__list">
55                <img class="p-gallery__photo" src="./assets/images/production_06.jpg" alt="夕日の空">
56              </li>
57            </ul>
58          </section>
59          <section class="p-selfintroduction">
60            <h2 class="p-selfintroduction__title">自己紹介</h2>
61            <p class="p-selfintroduction__text">
62              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
63            </p>
64          </section>
65        </div>
66      </main>
67      <footer class="l-fotter">
68        <div class="c-copyright">
69          <div class="c-copyright__inner">
70            <p class="c-copyright__text">
71              <small>© 2019 example.inc</small>
72            </p>
73          </div>
74        </div>
75      </footer>
76    </div>
77  </body>
78</html>

CSS
1@charset "UTF-8";
2
3.l-wrapper {
4    background-color: #fffaf0;
5}
6
7.l-header {
8    display: flex;
9    justify-content: space-between;
10    align-items: center;
11}
12
13.l-header__logo {
14    width: 90px;
15    height: 90px;
16    padding: 10px;
17}
18
19.p-nav__menu {
20    display: flex;
21}
22
23.p-nav__list {
24    margin-right: 40px;
25}
26
27.p-nav__button {
28    font-size: 150%;
29    text-decoration: none;
30}
31
32.c-hero {
33    height: 1000px;
34    background-image:url(../images/hero.jpg);
35    background-repeat:  no-repeat;
36    background-size: cover;
37}
38
39.l-main__title {
40    display: flex;
41    justify-content: center;
42    padding: 130px 0px 130px 0px;
43    color: #808080;
44    font-size: 250%;
45}
46
47.p-gallery {
48    color: #808080;
49    font-size: 200%;
50}
51
52.l-contents {
53    display: flex;
54    padding-left: 60px;
55}
56
57.p-gallery__tilte {
58    margin-bottom: 15px;
59    padding: 2px 0px 0px 20px;
60    border-left: solid 8px #ff69b4;
61    background: transparent;
62    color: #808080;
63    font-size: 90%;
64}
65
66.p-gallery__menu {
67    display: flex;
68    flex-wrap: wrap;
69}
70
71.p-gallery__photo {
72    width: 350px;
73    height: 250px;
74    margin: 15px 60px 0px 0px;
75}
76
77  .p-gallery {
78    width: 400%;
79  }
80
81  .p-selfintroduction {
82    padding-right: 70px;
83  }
84
85  .p-selfintroduction__title {
86    margin-bottom: 30px;
87    padding: 2px 0px 0px 20px;
88    border-left: solid 8px #ff69b4;
89    background: transparent;
90    color: #808080;
91    font-size: 190%;
92  }
93
94  .p-selfintroduction__text {
95    color: #808080;
96    font-size: 150%;
97    line-height:35px;
98  }
99
100  .c-copyright__inner {
101    display: flex;
102    justify-content: center;
103    padding: 100px 0px 100px 0px;
104  }
105
106  .c-copyright__text {
107    padding: 30px 50px;
108    border: solid 2px white;
109    background: #6495ED;
110    color: #fff;
111    font-size: 150%;
112    box-shadow: 0px 0px 0px 10px #6495ED;
113  }

Lhankor_Mhy

2021/07/12 00:38

「中央寄せにした上で、離れないように」とのことですが、この場合の、・「中央寄せ」とは .p-gallery に対しての中央寄せ・「離れないように」とは、.p-gallery と .p-selfintroduction とが離れないようにという理解で合っていますか？

maring

2021/07/12 03:34

仰る通りです。言葉足らずで申し訳ないです。

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

回答1件

ベストアンサー

以下を追加するとどうでしょうか？

css
1.p-gallery__menu {
2	justify-content: center;
3}

参考：
justify-content - CSS: カスケーディングスタイルシート | MDN

投稿2021/07/12 07:21

Lhankor_Mhy

総合スコア36104

maring

2021/07/12 10:14

追加しても変わらずでした。

Lhankor_Mhy

2021/07/13 00:56

当方の環境では、「中央寄せにした上で、離れないように」なっていました。サンプルを置いておきます。 https://jsfiddle.net/Lhankor_Mhy/guqp3wnf/

maring

2021/07/13 03:49

サンプルまでおいていただきありがとうございます。只今自分の環境下で見れない状況の為、確認させていただきます。ありがとうございます。

Lhankor_Mhy

2021/07/13 06:44

BA選出は解決してからで構いませんよ。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

ブラウザの幅を変えても要素の位置が変わらないようにしたい

関連した質問