only-childの指定がうまくできない

前提・実現したいこと

ulの部分だけを色をつけたい

https://www.youtube.com/watch?v=ghgNW-DcVuI&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=12

こちらの動画を見ながら勉強しているのですが、５：０８〜のonly-childの指定がうまくできないです
具体的には動画では点線で囲まれた部分のみ色がついているのですが、この通りにコードを入力してみると画面全体に色がついてしまいます

自分でも考えてみたのですが、どこが間違えているのかわからないです

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

エラーメッセージ

該当のソースコード

ソースコード
```<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>擬似的要素の練習</title>
	<link rel="stylesheet" href="./style.css">
</head>
<body>
　<ul>
	<li>The first child</li>
	<li>2nd child</li>
	<li>3rd child</li>
	<li>4th child</li>
	<li>The last child</li>
</ul>
</body>
</html>





body {
	padding: 1% 25%;
	font-family: sans-serif;
}
ul {
	margin: 25px auto 0;
    padding: 12px;
    border: 2px dotted grey;
    list-style-position: inside;
    font-size: 1.5em;
}
li{
	margin: 0;
	padding: 15px;
	border-bottom: 2px solid #224a6b; 
}

:only-child {
	background-color: tomato;
}

### 試したこと
一度自分で入力した後、動画のコードどおりに再度入力してみましたが、変わりませんでした

### 補足情報（FW/ツールのバージョンなど）
Sublime text