要素を中央に持ってきて、画像を並び変えたい。

現在イメージ①のように、要素が左側に寄っています。
これを綺麗に中央に寄せるにはどうすればいいでしょうか？

また、最新の作品の下にある作品画像をイメージ②のように並び替えるにはどうすればいいでしょうか？

ご教授お願いいたします。

イメージ①

イメージ②

html
1      <main class="l-main">
2        <h1 class="l-main__title">PC カリキュラム</h1>
3        <div class="l-contents">
4          <section class="p-gallery">
5            <h2 class="p-gallery__tilte">最新の作品</h2>
6            <ul class="p-gallery__menu">
7              <li class="p-gallery__list">
8                <img class="p-gallery__photo" src="./assets/images/production_01.jpg" alt="夕焼けと海">
9              </li>
10              <li class="p-gallery__list">
11                <img class="p-gallery__photo" src="./assets/images/production_02.jpg" alt="砂浜と貝殻">
12              </li>
13              <li class="p-gallery__list">
14                <img class="p-gallery__photo" src="./assets/images/production_03.jpg" alt="砂浜とドリンク">
15              </li>
16              <li class="p-gallery__list">
17                <img class="p-gallery__photo" src="./assets/images/production_04.jpg" alt="桟橋">
18              </li>
19              <li class="p-gallery__list">
20                <img class="p-gallery__photo" src="./assets/images/production_05.jpg" alt="小船">
21              </li>
22              <li class="p-gallery__list">
23                <img class="p-gallery__photo" src="./assets/images/production_06.jpg" alt="夕日の空">
24              </li>
25            </ul>
26          </section>
27          <section class="p-selfintroduction">
28            <h2 class="p-selfintroduction__title">自己紹介</h2>
29            <p class="p-selfintroduction__text">
30              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
31            </p>
32          </section>
33        </div>
34      </main>

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 {
40    width: 960px;
41}
42
43.l-main__title {
44    display: flex;
45    justify-content: center;
46    padding: 130px 0px 130px 0px;
47    color: #808080;
48    font-size: 250%;
49}
50
51.p-gallery {
52    color: #808080;
53    font-size: 200%;
54}
55
56.l-contents {
57    display: flex;
58    padding-left: 60px;
59}
60
61.p-gallery__tilte {
62    margin-bottom: 15px;
63    padding: 2px 0px 0px 20px;
64    border-left: solid 8px #ff69b4;
65    background: transparent;
66    color: #808080;
67    font-size: 90%;
68}
69
70.p-gallery__menu {
71    display: flex;
72    flex-wrap: wrap;
73}
74
75
76.p-gallery__photo {
77    width: 350px;
78    height: 250px;
79    margin: 15px 60px 0px 0px;
80}
81
82  .p-gallery {
83    width: 400%;
84  }
85
86  .p-selfintroduction {
87    padding-right: 70px;
88  }
89
90  .p-selfintroduction__title {
91    margin-bottom: 30px;
92    padding: 2px 0px 0px 20px;
93    border-left: solid 8px #ff69b4;
94    background: transparent;
95    color: #808080;
96    font-size: 190%;
97  }
98
99  .p-selfintroduction__text {
100    color: #808080;
101    font-size: 150%;
102    line-height:35px;
103  }
104
105  .c-copyright__inner {
106    display: flex;
107    justify-content: center;
108    padding: 100px 0px 100px 0px;
109  }
110
111  .c-copyright__text {
112    padding: 30px 50px;
113    border: solid 2px white;
114    background: #6495ED;
115    color: #fff;
116    font-size: 150%;
117    box-shadow: 0px 0px 0px 10px #6495ED;
118  }

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

回答1件

ベストアンサー

イメージ①

css
1.l-main {
2    width: 960px;
3    margin: auto;
4}

イメージ②

css
1.l-main {
2    width: 100%;
3}
4
5.p-gallery {
6    color: #808080;
7    font-size: 200%;
8    flex-grow: 1;
9    flex-shrink: -1;
10}
11
12.p-selfintroduction {
13  padding-right: 70px;
14  flex-grow: 0;
15  flex-shrink: -1;
16}