横スクロールのメニューバーが作りたい

前提

横スクロールのメニューバーが作りたい

実現したいこと

・横スクロールのメニューバーを作りたい
・タイトルを付けたい
・メニューを押したらそのページに飛べるようにしたい

該当のソースコード

HTML <div style="text-align: center;"> </div> <div class="content"> <p><img alt="" src="https://img07.shop-pro.jp/PA01352/367/etc/denpo_tittle.jpg?cmsp_timestamp=20220815134309" /><br /> <br /> こんな時どんなバルーンを贈ると喜ばれるの？<wbr />用途に合わせたオススメをご紹介します♪</p> <ul class="iconlist"> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> </ul> CSS <div class="content"> <style type="text/css">.content { margin-top: 10px; margin-bottom: 10px; padding-top: 20px; padding-bottom: 20px; background:#ffddff ; } .content p { text-align: center; margin-bottom: 30px; } ul.iconlist { display: flex; flex-wrap:wrap; justify-content:center; gap: 10px; } ul.a { display: flex; flex-wrap:wrap; justify-content:center; gap: 10px; } p{ word-break:keep-all; } </style> </div> </div>

試したこと

・</ul>の下にさらに<ul>を作り画像と同じように一覧？を作った
・メニューバーの作り方を調べてやってみたが変化がなかった

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

ピンクの部分は上記の結果です。
黄色の「予算」の部分を作りたいです。