レスポンシブサイトコーディング中 メディアクエリを用いて display:blockが上手く効かない

Question

いつもお世話になっております。

レスポンシブ対応のサイトをコーディング練習中です。

こちらのサイトの様に
スクリーンを479px以下にしたときに
日付と中身のコンテンツが縦に並ぶ様にしたいです。
thとtdそれぞれに、
display:block;を記述しましたが、上手く行きません。。。

それともう一点（質問が多くなってしまいすみません。）

TOPICSという上の文字と
リストをdisplay:blockを用いてflexを解除する事は出来たのですが、
TOPICSの文字を中央揃えにしたいのですが、
これもmargin: 0 auto;だったりtext-align:center;で試してみたのですが、
上手く動きませんでした。

以下の画像が今現在の状況です

よろしくお願いします。

<article class="topics">
   <section class="content-wrapper">
     <div slass="heading">
       <h2>TOPICS</h2>
     </div>
     <div class="content">
       <table>
         <tbody>
           <tr>
             <th>2020.00.00</th>
             <td>タイトルが入ります。</td>
           </tr>
           <tr>
             <th>2020.00.00</th>
             <td>タイトルが入ります。</td>
           </tr>
           <tr>
             <th>2020.00.00</th>
             <td>タイトルが入ります。</td>
           </tr>
           <tr>
             <th>2020.00.00</th>
             <td>タイトルが入ります。</td>
           </tr>
          </tbody>
       </table>
       <p class="btn"><a href="#">MORE</a></p>
      </div>
   </section>
  </article>

.topics{
  padding: 120px;
}

.topics .content-wrapper{
  display:-ms-flexbox;
  display:-webkit-flex;
  display: flex;
  justify-content: space-between;
}

.topics .heading{
  width:35%;
}

.topics .content{
  width: 65%;
}

.topics .content table{
  width: 100%;
  margin: 0 0 25px 0;
}

.topics .content th{
  padding: 20px 2em 20px 0;
  border-bottom: 1px dotted;
}

.topics .content td{
  border-bottom: 1px dotted;
}

.topics .content tr:last-of-type th,
.topics .content tr:last-of-type td{
  border-bottom: none;
}

.topics .content .btn{
  margin: 0;
}

.topics .content .btn a{
  display: block;
  font-size: 0.8rem;
  color: #000;
  border: 1px solid #000;
  width: 200px;
  line-height: 60px;
  text-align: center;
  margin: 0 0 0 auto;
}

.topics .content .btn a:hover{
  background: #333;
  color:#fff;
}

@media screen and (max-width: 1199px){
  .topics{
    padding: 50px 5vw;
  }

  .topics .content-wrapper{
    display: block;
  }

  .topics .heading{
    width: 100%;
  }

  .topics .heading h2 {
    text-align: center;
    margin-bottom: 5vw;
  }

  .topics .content{
    width: 100%;
  }
}

@media screen and (max-width: 767px){
  .topics{
    padding: 50px 0;
    width: 90%;
    margin: 0 auto;
  }

  .topics .content .btn a{
    width: 35%;
    min-width: 200px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 479px){
  .topics .content th {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1.25em 0 0 0;
    border-bottom: 0;
  }

  .topic .content td {
    display: block;
    width: 100%;
  }

}

Answer 1

日付と中身のコンテンツが縦に並ぶ様にしたいです。

thとtdそれぞれに、
display:block;を記述しましたが、上手く行きません。。。

タイプミスですね。

/*  .topic .content td { */
  .topics .content td {

TOPICSの文字を中央揃えにしたいのですが、

まず下記のタイプミスを修正。

/*    <div slass="heading"> */
    <div class="heading"> 
      <h2>TOPICS</h2>
    </div>

h2 に text-align: center; を設定。

 .heading h2{
    text-align: center;
  }

最初、このタイプミスは気付かずに苦労しました（;^ω^)

Comments

[AmanoEriko]

ご回答ありがとうございます！

なんと、、、、こんなにタイプミスがあったなんて、、、、
お恥ずかしい限りです。

（topicsの文字の中央揃えは直りました！！）

テーブルの方のエラーなのですが、
.topics .content td の所のタイプミスを修正した所、
まだ正常に動きません。。。
なぜでしょう？
再度、タイプミスが無いかとチェックをしたのですが、
どうやら大丈夫そうです。。。

[AmanoEriko]

すみません！！
解決いたしました！！