文字が回り込んでしまいます。css、HTML

cssとHTMLでサイトを作っています。

添付した画像のお知らせの部分が一つだけずれてしまいます
どう改善するべきか、、、教えて頂きたいです。

HTMLーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<div class="box4"> <div class="box4-1"> <div class="news"> <h1>お知らせ</h1> <ul> <li><a href="#"> <time datetime="2020-12-1">12/1</time> <div class="text">データセンターのメンテナンスを行います</div> </a></li> <li><a href="#"> <time detatime="2020-12-8">12/8</time> <div class="text">アンドロイドアプリのヴァージョン１.２をリリースしました</div> </a></li> <li><a href="#"> <time detatime="2020-12-11">12/11</time> <div class="text">セミナー開催に伴うキャンペーンのお知らせ</div> </a></li> <li><a href="#"> <time detatime="2020-12-24">12/24</time> <div class="text">グラフ表示の切り替え方法がわかりやすくなりました</div> </a></li> </ul> </div> </div>

cssーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

.news a:after {
content: "";
display: block;
clear: both;
}
.news time {
float: left;
width: 60px;
}
.news .text {
float: left;
width: auto;
width-left: 60px;
}