bootstrapをのstickyが使えない

前提・実現したいこと

ヘッダーの途中からメニュー部分だけ切れて付いてくる。みたいな動きにしたいのですが、うまくstickyが作動してくれません。

chromeの検証をみる限りエラーなどは出ていなくて、何が問題なのかわかりません。
bootstrap初心者なので、よろしくお願いいたします。

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

html
1	<header class="header_area">
2		<div class="container">
3			<div class="row align-items-center">
4				<div class="col-3 py-3">
5					<a href="index.html"><img src="https://picsum.photos/232/101" alt="" title="" height="50px"></a>
6				</div>
7				<div class="col-3 offset-4">
8					<div class="input-group">
9						<!-- 検索フォーム -->
10						<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
11						<button class="btn btn-primary" type="button" id="button-addon2">検索</button>
12					</div>
13				</div>
14				<div class="col-2">
15					<div class="float-right" <a href="index.html"><img src="https://picsum.photos/50/50" alt="" title=""></a>
16						<a href="index.html"><img src="https://picsum.photos/50/50" alt="" title=""></a>
17						<a href="index.html"><img src="https://picsum.photos/50/50" alt="" title=""></a>
18					</div>
19				</div>
20			</div>
21		</div>
22		<!-- ▼stickyしたい部分▼ -->
23		<div class="container sticky-top">
24			<div class="menu">
25				<nav class="nav nav-pills nav-fill">
26					<a class="nav-link active" aria-current="page" href="#">Active</a>
27					<a class="nav-link" href="#">Much longer nav link</a>
28					<a class="nav-link" href="#">Link</a>
29					<a class="nav-link" href="#">Disabled</a>
30					<a class="nav-link" href="#">Link</a>
31				</nav>
32			</div>
33		</div>
34	</header>