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

Question

実現したいこと

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

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

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

該当のソースコード

       <aside class="sidebar">
            <h3 class="heading-medium font-english">category</h3>
            <ul class="side-menu">
                <li><a href="#">お店の紹介</a></li>
                <li><a href="#">期間限定メニュー</a></li>
                <li><a href="#">お客様との会話</a></li>
            </ul>

            <h3 class="heading-medium font-english">Archives</h3>
            <ul class="side-menu">
                <li><a href="#">2023年</a></li>
                <li><a href="#">2022年</a></li>
                <li><a href="#">2021年</a></li>
                <li><a href="#">2020年</a></li>
            </ul> 
　　　</aside>

/* デスクトップ版
 ----------------- */
 @media (min-width: 800px) {
/* サイドバー */
.sidebar{
    display: flex;
}
.side-menu{
    list-style: none;
    text-align: center;
    margin-bottom: 4rem;
}
.side-menu li{
    border-bottom: 1px solid #c9c2bc;
}
.side-menu a{
    color: #432;
    display: block;
    padding: 1rem;
}
.side-menu a:hover{
    color: #0db;
}
~~~~~~~~~~~~~~~~~~~~~~~~
/* NEWS */
.sidebar{
    width: 22%;
    order: 3;
}
.sidebar .heading-medium{
    line-height: 1;
    margin-bottom: 1rem;
}
 }

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

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

補足

特になし

Comments

[kei344]

この質問を含め過去の質問もいくつかベストアンサーが選ばれていないようです。

Answer 1

何かの要素でラップしてあげるといいかもしれません。

<div class="wrap">
    <h3 class="heading-medium font-english">category</h3>
    <ul class="side-menu">
        <li><a href="#">お店の紹介</a></li>
        <li><a href="#">期間限定メニュー</a></li>
        <li><a href="#">お客様との会話</a></li>
    </ul>
</div>

Comments

[Riz]

ご教授頂きありがとうございます。ご指摘頂いた箇所を追加したところ、liをH3の下に持っていくことが出来ました。