justify-contentを使ってるが反映されない

要素を横幅の中央に配置したいので、justify-coontentsでcenterを指定しました。しかし画面の中央にアイテムが配置されず、左端に配置されてしまい困っています。


html
コード
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="linguage.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<header>
  <p>安いのにしっかり上達する英会話教室・英会話リンゲージ</p>
 <div class="header-contents">

   <a href="https://www.linguage-school.jp/"><img src="logo.png" alt=""></a>
   <div class="intro">
      <div class="intro-contents">

        <img src="tel-mark.png" alt="">
      <p class="tell">0120-965-680</p>
       <p>火〜木7:00/土11:00〜19:00</p>
       <p>※スクールにより受付時間が異なります。</p>
      </div> 
      <a href="https://www.linguage-school.jp/entry/trial/">まずは気軽に無料体験</a>
   </div>
 </div> 
</header>
<body>
  <div class="back">
    <img src="main-text.png" alt="">
    <img src="main-person-pc.png" alt="">
   

  </div>
  <div >※1 コースにより受講料金がことなります</div>
  <div class="join">
    <img src="lp-camp202010-sp.png" alt="">

<p>最大3ヶ月分の受講料が無料になるキャンペーン
 【キャンペーン内容】<br>
 10月31日までのキャンペーン期間中に初めて入会される受講生に限り<br>
 最大3ヶ月分の受講料が無料になるほか、対面レッスン・オンラインレッスン振り替えも最大 3 ヶ月分無料。<br>
さらに最長1年間オンライン教材無料！<br>
3大特典が付くリンゲージのGo to studyキャンペーンは、入会のお申込み日が早いほどお得です。
※キャンペーン適用には条件がございます。</p>
  </div class="colona-support">
  <div class> <img src="avoid01.png" alt="">
    <img src="avoid02.png" alt="">
    <img src="avoid03.png" alt="">
    <img src="avoid04.png" alt="">
    <img src="avoid05.png" alt="">
  <img src="avoid06.png" alt="">
  
  </div>
</body>
</html>

コード css
header{width:100%; top:0; }
header p{background-color: #eee; margin:0; font-size:12px;}
.back{background-image:url("bg-cover-pc.jpg");}
.intro{display:inline-block; position:absolute; left:900px;}
.tell{display:inline-block; font-size:30px; color:#888; margin:0;}
.intro-contents{display: inline-block;}
.header-contents{position:relative; height:150px;}
/* オンライン教材の説明 */
.join{text-align:center; display:inline-block; width:100%;}
.colona-support{   display:flex; 
  flex-wrap: wrap;
  width: 86%;
  justify-content: center;
}

m.ts10806

2020/10/15 00:19

起きている問題に対して、調べたこと試したことを記載してください。あと、言語名はコードブロックの冒頭に記載し、実際のコード以外はブロック内に入れないように配慮願います。 ```css ```html

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

回答1件

ベストアンサー

問題はCSSの記述ではなく、HTMLファイルにあります。
colona-supportクラスを指定しているdiv要素のタグが終了タグになっており、実質的にcolona-supportクラスが存在しません。おそらく、その直後のdiv要素の開始タグ(class属性だけ指定され、属性値が指定されていない)に属性値を書くつもりで間違えましたね。

Diff
1-  </div class="colona-support">
2+  </div>
3-  <div class> <img src="avoid01.png" alt="">
4+  <div class="colona-support">
5+    <img src="avoid01.png" alt="">