nth-of-child(3) css反映されない

前提・実現したいこと

.planの3つ目のみ　強調させて少し上へひょっこり抜け出したい

発生している問題・エラーメッセージ

コンパイルされているのに、反応されない

試したこと

scssの＆-使い方を確認し、develop toolで確認するも反応してない
自身のcssを確認すると、私が思った通りにコンパイルされている。

nth-of 書き方

該当のソースコード

HTML
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<section class="system">
	<section class="table">
		<h3>料金表</h3>
		<div class="conatiner">
			<div class="cost-table">
				<ul class="table-list">
					<li class="table-item">
						<div class="plan">
							基礎プラン
						</div><!-- /.plan -->
						<div class="plan-content">
							<div class="money">
								<h3>59,000</h3>
								<p class="no-tax">*月額（税抜価格）</p><!-- /.no-tax -->
							</div><!-- /.money -->
							<ul class="desc-list">
								<li class="desc-item">カリキュラム作成</li><!-- /.desc-item -->
								<li class="desc-item">TOEFL学習サポート</li><!-- /.desc-item -->
								<li class="desc-item">週一回のビデオMTG</li><!-- /.desc-item -->
							</ul><!-- /.desc-list -->
						</div><!-- /.desc -->
					</li><!-- /.table-item -->
					<li class="table-item">
						<div class="plan">
							演習プラン
						</div><!-- /.plan -->
						<div class="plan-content">
							<div class="money">
								<h3>75,000</h3>
								<p class="no-tax">*月額（税抜価格）</p><!-- /.no-tax -->
							</div><!-- /.money -->
							<ul class="desc-list">
								<li class="desc-item">カリキュラム作成</li><!-- /.desc-item -->
								<li class="desc-item">TOEFL学習サポート</li><!-- /.desc-item -->
								<li class="desc-item">週一回のビデオMTG</li><!-- /.desc-item -->
								<li class="desc-item">月二回の模試（解説付き）</li><!-- /.desc-item -->
							</ul><!-- /.desc-list -->
						</div><!-- /.desc -->
					</li><!-- /.table-item -->
					<li class="table-item">
						<div class="plan">
							おすすめ<br>
							志望校対策プラン
						</div><!-- /.plan -->
						<div class="plan-content">
							<div class="money">
								<h3>95,000</h3>
								<p class="no-tax">*月額（税抜価格）</p><!-- /.no-tax -->
							</div><!-- /.money -->
							<ul class="desc-list">
								<li class="desc-item">カリキュラム作成</li><!-- /.desc-item -->
								<li class="desc-item">TOEFL学習サポート</li><!-- /.desc-item -->
								<li class="desc-item">週一回のビデオMTG</li><!-- /.desc-item -->
								<li class="desc-item">月二回の模試（解説付き）</li><!-- /.desc-item -->
								<li class="desc-item">週一の英語面接対策</li><!-- /.desc-item -->
							</ul><!-- /.desc-list -->
						</div><!-- /.desc -->
					</li><!-- /.table-item -->
					<li class="table-item">
						<div class="plan">
							フレックス
						</div><!-- /.plan -->
						<div class="plan-content">
							<div class="money">
								<h3>60,000</h3>
								<p class="no-tax">*月額（税抜価格）</p><!-- /.no-tax -->
							</div><!-- /.money -->
							<ul class="desc-list">
								<li class="desc-item2">＊別途ご相談ください</li><!-- /.desc-item -->
							</ul><!-- /.desc-list -->
						</div><!-- /.desc -->
					</li><!-- /.table-item -->
				</ul><!-- /.table-list -->
			</div><!-- /.cost-table -->
		</div><!-- /.container -->
	</section><!-- /.table -->
</body>
</html>

css
.table .container {
  max-width: 960px;
  padding: 0px 30px;
}

.table .cost-table .table-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.table .cost-table .table-list .table-item {
  width: 200px;
  height: 475px;
  border: .5px solid #1B224C;
  margin-left: 7px;
}

.table .cost-table .table-list .table-item .plan {
  display: block;
  background-color: #1B224C;
  text-align: center;
  color: #fff;
  width: 220px;
  height: 60px;
  font-size: 16px;
  font-weight: bold;
  line-height: 2;
}

.table .cost-table .table-list .table-item .plan:nth-child(3) {
  background-color: #F5A623;
  width: 200px;
  height: 96px;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

.table .cost-table .table-list .table-item .plan:nth-child(3) br {
  padding-bottom: 19px;
}

.table .cost-table .table-list .table-item .money h3 {
  color: #1B224C;
  font-size: 2.5rem;
  padding: 30px 0px 14px;
  margin: 0px;
}

.table .cost-table .table-list .table-item .money .no-tax {
  color: #1B224C;
  padding-bottom: 50px;
  text-align: center;
}

.table .cost-table .table-list .table-item .desc-list {
  padding: 30px 15px 25px 15px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.table .cost-table .table-list .table-item .desc-list .desc-item {
  padding-bottom: 20px;
}

.table .cost-table .table-list .table-item .desc-list .desc-item::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 5px;
  top: 5px;
  left: -15px;
  border-left: 3px solid #1b224c;
  border-bottom: 3px solid #1b224c;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin-right: 10px;
  margin-bottom: 10px;
  vertical-align: middle;
}

追記

CSS

.table .cost-table .table-list .table-item .plan {
  display: block;
  background-color: #1B224C;
  text-align: center;
  color: #fff;
  width: 220px;
  height: 60px;
  font-size: 16px;
  font-weight: bold;
  line-height: 2;
}

.table .cost-table .table-list .table-item .plan:nth-of-child(3) {
  background-color: #F5A623;
  width: 200px;
  height: 96px;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

.table .cost-table .table-list .table-item .plan:nth-of-child(3) br {
  padding-bottom: 19px;
}