横並びのリストを縦並びにしたい

前提・実現したいこと
リストを縦並びにしたい

発生している問題・エラーメッセージ
Dental Clinicというサイトの模写コーディングをやっているのですが、リストの表示が初めから横並びになっていて縦にする方法が分からないので質問しました

該当のソースコード

コード
ＨＴＭＬ
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dental clinic</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <header>
      <img src="image/siteTitle.png">
      <div class="header-right">
        <div class="sub-title">
          <p>“地域に根付いた歯科医院” デンタル クリニック</p>
        </div>
        <div class="adress">
          <p><i class="fas fa-phone fa-flip-horizontal"></i>03-0000-0000</p>
        </div>
        <div class="time">
          <p>予約受付時間 10:00～19:30 <span>日祝 休診</span></p>
        </div>
      </div>
      <nav>
        <ul>
          <li><a href="#">トップページ<br>HOME</a></li>
          <li><a href="#">医院紹介<br>CLINIC</a></li>
          <li><a href="#">診療案内<br>SERVICE</a></li>
          <li><a href="#">院長・スタッフ紹介<br>STAFF</a></li>
          <li><a href="#">アクセス<br>ACCESS</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <aside>
        <div class="General">
          <h2>一般歯科</h2>
          <ul>
            <li><a href="#">虫歯治療</a></li>
            <li><a href="#">歯周病治療</a></li>
            <li><a href="#">入れ歯</a></li>
            <li><a href="#">予防歯科</a></li>
          </ul>
        </div>
        <div class="Aesthetic">
          <h2>審美歯科</h2>
          <ul>
            <li><a href="#">ホワイトニング</a></li>
            <li><a href="#">オールセラミック</a></li>
            <li><a href="#">セラミックインレー</a></li>
            <li><a href="#">PMTC</a></li>
          </ul>
        </div>
      </aside>
      <article>
        <img src="image/in01.jpg">
        <div class="news">
          <h2>新着情報</h2>
          <div class="date">
            <p>2012年08月01日</p>
          </div>
          <div class="notice">
            <p>【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</p>
          </div>
          <div class="date">
            <p>2012年07月24日</p>
          </div>
          <div class="notice">
            <p>【8月の休診のお知らせ】8月12日～16日の間は休診とさせていただきます。何卒よろしくお願いいたします。</p>
          </div>
          <div class="date">
            <p>2012年07月02日</p>
          </div>
          <div class="notice">
            <p>【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。</p>
          </div>
          <div class="date">
            <p>2012年06月20日</p>
          </div>
          <div class="notice">
            <p>【7月休診日のお知らせ】7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</p>
          </div>
          <div class="date">
            <p>2012年06月01日</p>
          </div>
          <div class="notice">
            <p>ホームページをリニューアルしました。</p>
          </div>
        </div>
      </article>
    </main>
    <footer>
      <div class="list">
        <a href="#"><i class="fa fa-circle-thin"></i>トップページ</a>
        <a href="#"><i class="fa fa-circle-thin"></i>医院紹介</a>
        <a href="#"><i class="fa fa-circle-thin"></i>診療案内</a>
        <a href="#"><i class="fa fa-circle-thin"></i>院長・スタッフ紹介</a>
        <a href="#"><i class="fa fa-circle-thin"></i>アクセス</a>
      </div>
      <div class="address">
        <p><span>デンタル クリニック</span> 東京都新宿区市谷左内町21-13 TEL:03-0000-0000</p>
      </div>
      <div class="footer-bottom">
        <p>Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.</p>
      </div>
    </footer>
  </div>
</body>
</html>

CSS
@charset "utf-8";

/* 共通部分 */
* {
  padding: 0px;
  margin: 0px;
}
body {
  border-top: 8px solid #6ee;
}
.container {
  width: 920px;
  margin: 0 auto;
}

/* ヘッダー */
.top {
  display: flex;
}
.header-right {
  float: right;
}
ul {
  display: flex;
}
header img {
  padding-top: 53px;
  padding-bottom: 35px;
}

/* ヘッダー左 */
.sub-title {
  font-size: 10px;
  padding-top: 15px;
  padding-bottom: 25px;
}
.adress {
  font-size: 26px;
}
.fas {
  padding-left: 18px;
  opacity: 0.5;
}
.time {
  border: 1px solid #d6d6d6;
  font-size: 10px;
  padding: 10px 20px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.header-right span {
  color: #b22;
}

/* ナビゲーションメニュー */


/* メイン */
aside {
  width: 20%;
}
article {
  width: 65%
}
main {
  display: flex;
  padding: 15px 0;
}
.news {
  background-color: #fff;
  height: 410px;
}
.news h2 {
  font-size: 16px;
  border-bottom: 1px solid #6ee;
  padding-top: 40px;
  padding-bottom: 20px;
}
aside a {
  display: block;
}

/* フッター */
footer {
  height: 120px;
}
.list {
  background-color: #6ee;
}
.list a {
  color: #fff;
  padding-right: 25px;
  padding-left: 15px;
  text-decoration: none;
  border-radius: 6px;
}
.address {
  border-bottom: 2px solid #6ee;
  padding: 18px 0;
}
.address p {
  text-align: right;
  font-size: 13px;
}
.address span {
  font-weight: bold;
}
.footer-bottom p {
  text-align: center;
  font-size: 12px;
  padding: 18px 0;
}