入力した文章をデスクトップ版で確認すると配置がズレてしまうのを直したい。

実現したいこと

入力した文章をデスクトップ版で確認すると配置がズレてしまうのを直したい。

発生している問題・分からないこと

[aside]記入したli文章をデスクトップ版で確認すると縦書きに変更され[cotegory]と[Archives]の横に移動してしまいます。正しくは横書きで[cotegory]と[Archives]の下にli文章を持っていきたいです。[aside]タグのサイズを小さく指定したり配置を変更したりすると縦書きになってしまいます。該当ソースコードに不備があるかと思いますがご教授頂けますと幸いです。

該当のソースコード

HTML

1 <aside class="sidebar"> 2 <h3 class="heading-medium font-english">category</h3> 3 <ul class="side-menu"> 4 <li><a href="#">お店の紹介</a></li> 5 <li><a href="#">期間限定メニュー</a></li> 6 <li><a href="#">お客様との会話</a></li> 7 </ul> 8 9 <h3 class="heading-medium font-english">Archives</h3> 10 <ul class="side-menu"> 11 <li><a href="#">2023年</a></li> 12 <li><a href="#">2022年</a></li> 13 <li><a href="#">2021年</a></li> 14 <li><a href="#">2020年</a></li> 15 </ul> 16　　　</aside>

CSS

1/* デスクトップ版 2 ----------------- */3 @media (min-width: 800px) {4/* サイドバー */5.sidebar{6 display: flex;7}8.side-menu{9 list-style: none;10 text-align: center;11 margin-bottom: 4rem;12}13.side-menu li{14 border-bottom: 1px solid #c9c2bc;15}16.side-menu a{17 color: #432;18 display: block;19 padding: 1rem;20}21.side-menu a:hover{22 color: #0db;23}24~~~~~~~~~~~~~~~~~~~~~~~~ 25/* NEWS */26.sidebar{27 width: 22%;28 order: 3;29}30.sidebar .heading-medium{31 line-height: 1;32 margin-bottom: 1rem;33}34 }

試したこと・調べたこと

上記の詳細・結果

自分で調べましたが答えを得られませんでした。

補足

特になし