リストマーカーとテキストが離れてしまう

中央寄せの要素の子要素にul>liを入れると、リストマーカーが
リストのテキストと離れてしまいます。どうしたらリストマーカーとテキスト部分を横並びにできるでしょうか？

HTML
1<div class="container">
2        <div class="row">
3          <div class="col align-self-center">
4            <h1>家計簿アプリ</h1>
5            <ul>
6              <li>Do landory</li>
7            </ul>
8          </div>
9        </div>
10      </div>

こちらも同じです。

<div className="container">
        <div class="row">
          <div class="offset-md-3 col-md-8">
            <h1>家計簿アプリ</h1>
            <ul>
              <li>Do landory</li>
            </ul>
          </div>
        </div>
      </div>

m.ts10806

2022/08/07 03:29

コンソールのエラー2件は何が出てますか？そっちの解決が先に思うのですが。コードも一部だと再現できないのでなるべく全てご提示を。各バージョンも記載願います。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず提示された範囲のHTMLを使って試してみたけど質問の画像のような状態にはなりませんでしたので、
別の原因じゃないでしょうか。(Chrome バージョン: 104.0.5112.81（Official Build）（64 ビット）で確認)

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>Document</title>
7    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet">
8</head>
9
10<body>
11    <div class="container">
12        <div class="row">
13            <div class="col align-self-center">
14                <h1>家計簿アプリ</h1>
15                <ul>
16                    <li>Do landory</li>
17                </ul>
18            </div>
19        </div>
20    </div>
21
22    <div className="container">
23        <div class="row">
24            <div class="offset-md-3 col-md-8">
25                <h1>家計簿アプリ</h1>
26                <ul>
27                    <li>Do landory</li>
28                </ul>
29            </div>
30        </div>
31    </div>
32</body>
33
34</html>