ol li の回り込みの避け方について

Question

###前提・実現したいこと

<ol> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキストテキストテキスト</li> </ol>

このような文章を限られたwidthで表示させると、

１、テキストテキスト
２、テキストテキスト
３、テキストテキスト
テキストテキスト

このように表示されてしまうのですが、
これを番号の下に回り込まずに

１、テキストテキスト
２、テキストテキスト
３、テキストテキスト
□□テキストテキスト

このように表示させるにはどのようなスタイルを書けばよいのでしょうか？
ご教授願います。

CSSを追記させていただきました。
ご指摘ありがとうございます。

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

段が下がった部分が回りこんでしまいます。

###該当のソースコード

<div class="list-sec">
		<ol class="list">
	        <li>テキストテキスト</li>
	        <li>テキストテキスト</li>
	        <li>テキストテキストテキストテキスト</li>
	    </ol>
	</div>

.list {
    list-style: none;
    counter-reset: number;
    padding: 0;
    font-size: 15px;
}
.list li {
    line-height: 2;
}
.list li:before {
    counter-increment: number;
    content: counter(number);
    display: inline-block;
    width: 2em;
    height: 2em;
    text-align: center;
    border: 2px solid #1b1464;
    color: #1b1464;
    margin-right: 1.4em;
}

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[LibertyBell3]

肝心なCSSの記述が抜けてますので、追記してみてください。

[TheDiamondFour]

ご指摘ありがとうございます。CSSを追加しました。

Answer 1

これを番号の下に回り込まずに

１、テキストテキスト
２、テキストテキスト
３、テキストテキスト
□□テキストテキスト

このように表示させるにはどのようなスタイルを書けばよいのでしょうか？

CSS の適用されていないデフォルト状態の ol / li で、
上記のように表示されます。

何かしら悪さをしているスタイルがあると思います。

###追記

下記スタイルを追記してはどうでしょうか。

.list li {
    padding-left: 56px;
    text-indent: -56px;
}
.list li:before {
    text-indent: 0;
}

Answer 2

勘で書いたら間違ってた…

li {
  position:relative;
  padding-left:2.5em;
}
li:before {
  position:absolute;
}

とかでしたね…