ボックスの中の文字の行頭の折り返し調節のcssが適応されない。

赤い線のボックス内の箇条書きで書いてある文字の折り返しが点（・）と同じ行にくる文字を
１字右にずらしてきれいに合わせたいのですが、付属画像２のような感じにしたいのですが、
ｃｓｓに以下のコードを記述したのですが、効果が適応されません。
/* 行頭の折り返し調節 */
.lawaa {
text-indent: -1em;
padding-left: 1em;

}
付属画像１
![
付属画像２
付属画像のように揃えたいのですが、原因はなんでしょうか？

html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5<head>
6	<meta content="text/html; charset=utf-8" />
7	<meta name="viewport" content="width=device-width, initial-scale=1">
8	<title>お問い合わせ</title>
9	<link rel="stylesheet" href="zzz1.css">
10	<link rel="stylesheet" href="reset.css">
11	
12</style>
13	<div class="box_css">
14		
15<div class="lawaa1"><!--行頭の折り返し調節-->
16・弊社から予約した時間帯にお電話をさせて頂くため、通話料は掛かりません。
17</div>
18<div class="lawaa1"><!--行頭の折り返し調節-->
19・スマホの電池残量にご注意下さい。
20</div>
21<div class="lawaa1"><!--行頭の折り返し調節-->
22・周りの方にご迷惑の掛かる場所でのお電話に関しましては、再調整していただく場合もございます。
23</div>
24<div class="lawaa1"><!--行頭の折り返し調節-->				
25・運転中のお電話はお断りさせていただきます。
26</div>
27</div>
28
29</body>
30
31</html>
32 
33
34

css
1/* 電話の際の注意事項ボックスのデザイン， */
2.box_css{
3  width:395px;
4  height: 400px;
5  margin: 5em auto;/* ブロックレベルの中央寄せのためautoを用いる，text-align: center効かない */
6  border: solid 3px #f87902;
7  background-color: rgb(255, 255, 255);
8  padding-left: 14px;/* ボックス内左の余白 */
9  padding-right: 15px;/*ボックス内 右の余白 */
10  padding-top: 10px;/*ボックス内 上の余白 */
11  }
12/* 行頭の折り返し調節 */
13.lawaa {
14  text-indent: -1em;
15  padding-left: 1em;
16
17
18}