画像と文字の位置配置がうまいことできません。

全体図

前回も同じようなことがあったんですが、その時は「 align-items: center;」でなおりました。
今回は「 align-items: center;」で修正が効かず2時間ほど時間が経ってしまったので質問させて頂きました。
模写コーディングをしている住友商事のLPを検証ツールを使ってStylesみてみてもわからない状態です。

ご教授よろしくお願いします。

コードはこちらになります。

HTML
1、、、＜省略＞
2      <div class="notice">
3        <div class="notice1">
4          <div class="noticeList">
5            <p class="noticeView"><img class="noticeImg" src="img/icons/icon-pagetop1.png" alt="#">【重要なお知らせ】当社における新型コロナウイルス感染者の発生について</p>
6            <p class="noticeView"><img class="noticeImg" src="img/icons/icon-pagetop1.png" alt="#">【重要なお知らせ】新型コロナウイルス感染拡大に伴う対応について（5月26日時点）</p>
7            <p class="noticeView"><img class="noticeImg" src="img/icons/icon-pagetop1.png" alt="#">【重要なお知らせ】当社社名、当社役職員名等をかたった詐欺メールについて</p>
8          </div>
9          <div class="listInline">
10           <img class="listInlineImg" src="img/icons/icon-pagetop1.png" alt="#">ニュースリリース
11           <img class="listInlineImg" src="img/icons/icon-pagetop1.png" alt="#">トピックス
12          </div>
13        </div>
14      </div>
15    </article>
16  </main>
17</body>
18</html>

CSS
1、、、＜省略＞
2
3.notice {
4  background-color: #fff;
5}
6
7.notice1 {
8  margin-left: 360px;
9  margin-top: 35px;
10}
11
12.noticeList {
13  display: flex;
14  flex-direction: column;
15  flex-wrap:nowrap;
16}
17
18.noticeImg {
19  height: 16px;
20  width: 16px;
21  margin-right: 15px;
22}
23
24.listInlineImg {
25  height: 16px;
26  width: 16px;
27  margin-right: 10px;
28}
29
30.noticeView {
31  margin-bottom: 15px;
32  font-family: 'Noto Sans JP', sans-serif;
33  font-weight: 100;
34}
35
36.listInline {
37  font-family: 'Noto Sans JP', sans-serif;
38  font-weight: 100;
39  display: flex;
40  align-items: center;
41}

よろしくお願いします！

Lhankor_Mhy

2020/10/15 07:40

「ニュースリリース」の後に余白を開けたい、ということですか？

dit.

2020/10/15 07:46

模写元のサイトを見ると各項目はリスト（li）になっていて、そのliに対してmarginを設定し隙間を空けているようです。構造が違いますが質問に提示のコードのままニュースリリースとトピックスの間に余白を入れたいということでしょうか？

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

回答1件

こんばんは。

すごくアドホックな感じの解決法ですが……

css
1.listInlineImg {
2  height: 16px;
3  width: 16px;
4/*margin-right: 10px;*/
5  margin-right: -14px;
6}
7.listInline {
8  font-family: 'Noto Sans JP', sans-serif;
9  font-weight: 100;
10  display: flex;
11  align-items: center;
12  gap: 24px; /* 追加 */
13}