レーティングの星がどこかに行ってしまうのを固定したい。

CSS初心者です。
よろしくおねがいします。

ネットショップのサイト運営でメニューを作成しておりまして、つまづいております。
横並びのナビゲーションメニューでカテゴリごとのメニューがあり、その隣に検索窓を設置しています。

そのメニューの中にレビューへのリンクを設置してレーティングの星マークを付けているのですが、
ブラウザのウィンドウを大きくするとなぜか星がどこかに逃げてしまうのです。
この星を固定にしたいのですが、いろいろ試してみたのですが、うまくいきません。

下記）

<li><a class="active" href="＊＊＊">総合レビュー評価<span class="star5_rating" data-rate="4"></span></a></li>

"star5_rating" この星が崩れてどこかにいってしまうのです。

ご教授いただけたら嬉しいです。よろしくおねがいいたします。

CSS
/メニューＣＳＳ/
ul.topnav {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
padding: 8px 20px;
text-decoration: underline;
color: #330000;
}
ul.topnav li a.active {
background-color: #ffcc99;
text-decoration: underline;
}
ul.topnav li a.active {
background-color: #330000;
color:white;
text-decoration: underline;
}
ul.topnav li.right {
float: right;
}

/星レーティング/

.star5_rating{
position: relative;
z-index: 0;
display: inline-block;
white-space: nowrap;
color: #CCCCCC; /* グレーカラー自由に設定化 */
/*font-size: 30px; フォントサイズ自由に設定化 */
}

.star5_rating:before, .star5_rating:after{
content: '★★★★★';
}

.star5_rating:after{
position: absolute;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
color: #ffcf32; /* イエローカラー自由に設定化 */
}

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 /
.star5_rating[data-rate="4.5"]:after{ width: 90%; } / 星4.5 /
.star5_rating[data-rate="4"]:after{ width: 80%; } / 星4 */

}

HTML

<div class="searchkey cf"> <div class="search cf"> <form method="get" action="＊＊＊"> <input value="6" type="hidden" name="sv"> <input value="＊＊＊" type="hidden" name="sid"> <input value="＊＊＊" type="hidden" name="su"> <input value="A" type="hidden" name="f"> <input type="text" name="sitem" class="search_txt" placeholder="今日は何をお探しですか？"/> <input type="image" class="search_btn" src="https://www.＊＊＊" value="商品検索" /> </form> </div> <ul class="topnav"> <li><a class="active" href="＊＊＊">総合レビュー評価<span class="star5_rating" data-rate="4"></span></a></li> <li class="right"><a href="https://＊＊＊">＊＊から探す</a></li> <li class="right"><a href="https://＊＊＊">＊＊から探す</a></li> <li class="right"><a href="https://＊＊＊">＊</a></li> <li class="right"><a href="https://＊＊＊">＊</a></li> </ul> </div>