親つぶれしてしまいます。clearfixの使い方間違っていますか？

模写しています。
floatを使って、「遊んで楽しむ」の右側に「見て楽しむ」」を持ってきたいです。
VScodeを使って記述しているのですが、エラーメッセージなどありません。
|列1|列2|列3|
|:--|:--:|--:|
||||

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="description" content="float練習NewYork">
	<title>float練習NewYork</title>
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<div class="wrap">

		<header>
			<img src="img/logo.jpg" alt="top画像">
			
		</header>
		<main>
			<div class="content">
				<img src="img/01.jpg" alt="NY画像">

			</div>
			
			<div class="box">
				<div class="section01">
					<h2>遊んで楽しむ</h2>
					<ul>
						<li><a href="#">セントラルパーク</a></li>
						<li><a href="#">ブロンクス動物園</a></li>
						<li><a href="#">ショッピング</a></li>
						<li><a href="#">食べ歩き</a></li>
						<li><a href="#">ストリートミュージシャン</a></li>
					</ul>
				</div>

				<div class="section02" "clearfix">
					<h2>見て楽しむ</h2>
					<ul>
						<li><a href="#">ブロードウェイ</a></li>
						<li><a href="#">近代美術館</a></li>
						<li><a href="#">ブルックリン橋</a></li>
						<li><a href="#">食べ歩き</a></li>
						<li><a href="#">エンパイアステートビル</a></li>
					</ul>
				</div>

			</div>
			
		</main>

		<footer>
			<p>Copyright &copy;2012 All Rights Reserved.</p>
		</footer>
		
	</div>
</body>
</html>

@charset "UTF-8";

/* 全要素の初期設定の余白ゼロ */
*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

body{
	font-family:"メイリオ", Osaka, sans-serif;
	background-color: #ccc;
	margin: 0 auto;
	width: 700px;

}

.content{
	width:500px;
	margin: auto;
}

main{
	background-color: white;
	width:700px;
	margin:0 auto;
}

.box{
	width:500px;
	margin: 0 auto;
}

.clearfix::after{
    content:" ";
    display: block;
    clear: both;
}

.section01{
	float: left;
}

.section02{
	float: left;

}

h2{
	background-color: #9ED1FF;
	text-align: center;
	width: 230px;
}
	
footer{
	background-color: #9ED1FF;
	text-align: center;
	width: 700px;

}
	/* ページ構造に関する記述 */