Html 如何对齐容器旁边的文本并防止其重叠？

我有一个网站，显示明星评级。在星星旁边，我想展示伴随星星数量的数字分数。但是，使星星能够正确显示的CSS属性导致我希望显示的文本与页面上的星星重叠。为了更好地说明这个问题，我提供了一个代码片段

正文{
显示：网格；
网格模板区域：
“标题”
“导航文章广告”
'导航页脚'；
网格模板行：80px 1fr 70px；
网格模板柱：20%1fr 15%；
网格行间距：1px；
栅柱间隙：1px；
高度：100vh；
保证金：0；
填充：0；
}
a{
颜色：#0ad05b；
文字装饰：无；
}
a:悬停{
颜色：#e3eaee；
}
标题{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：0.2米；
背景：#21313c；
字体系列：Helvetica、Arial、无衬线字体；
颜色：#e3eaee；
字体大小：14px；
}
页脚，
文章
导航，
div{
填料：1.2米；
背景:#061621；
字体系列：Helvetica、Arial、无衬线字体；
颜色：#e3eaee；
字体大小：14px；
}
文本区{
字体系列：Arial、Helvetica、无衬线字体；
}
#页眉{
网格区域：标题；
}
#页脚{
网格区域：页脚；
}
#主文{
网格区域：文章；
调整内容：灵活启动；
显示器：flex；
柔性包装：包装；
弯曲方向：行；
调整内容：灵活启动；
}
#主条船{
网格区域：文章；
调整内容：灵活启动；
显示器：flex；
柔性包装：包装；
弯曲方向：行；
调整内容：灵活启动；
}
#主导航{
网格区域：导航；
}
#网站广告{
网格区域：ads；
}
/*形式风格*/
#主要文章形式{
背景：线性梯度（50度，rgba（6,22,33,0.5），rgb（0,0,0）），
网址(https://cruisecrunch.s3.us-east-2.amazonaws.com/bg.jpg);
背景尺寸：封面；
背景重复：无重复；
背景位置：右；
}
#主文{
背景：线性梯度（15度，rgba（6、22、33、0.7）、rgb（0、0、0）），
网址(https://cruisecrunch.s3.us-east-2.amazonaws.com/bg.jpg);
背景尺寸：封面；
背景重复：无重复；
背景位置：右；
}
.注册{
背景：透明；
}
.innerArticleForm{
宽度：65%；
保证金：0自动；
背景：透明；
}
.文本{
背景：透明；
}
.复习表格{
背景：透明；
}
.表格h1{
颜色：#e3eaee；
文本对齐：居中；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：30px；
}
.内条表格h2{
颜色：#e3eaee；
文本对齐：居中；
字号：18px；
}
形式{
填充：39px；
}
.form__组{
背景：#000000a1；
显示器：flex；
证明内容：之间的空间；
}
.表格组标签{
宽度：232px；
显示：内联；
文本对齐：左对齐；
}
.表格组选择{
填充：6px；
浮动：对；
}
.form__组输入{
填充：6px；
字体大小：14px；
边界半径：4px；
浮动：对；
}
.form__组文本区域{
字体大小：14px；
浮动：对；
高度：自动；
宽度：100%；
颜色：#7676；
}
.小学{
填充：8px 18px；
利润率：22px 0px；
字号：18px；
背景：#0ad05b；
边框：2个实心#9898；
}
.内件{
高度：17vh；
宽度：17vh；
背景：透明；
页边顶部：1rem；
边缘底部：1rem；
}
.大用户照片{
边界半径：50%；
}
.userAvatar{
高度：3雷姆；
宽度：3rem；
边界半径：50%；
右边距：1rem；
}
.主页{
高度：3雷姆；
宽度：3rem；
边界半径：50%；
右边距：1rem；
}
海德赖特先生{
网格区域：标题；
自我辩护：正确；
填料：1.2米；
背景：#21313c；
字体系列：Helvetica、Arial、无衬线字体；
颜色：#e3eaee；
}
.对{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
填充：0.5em；
背景：#21313c；
字体系列：Helvetica、Arial、无衬线字体；
颜色：#e3eaee；
}
.左{
背景：#21313c；
字体系列：Helvetica、Arial、无衬线字体；
颜色：#e3eaee；
对齐内容：左对齐；
对齐项目：左；
对正内容：左；
}
.表格用户照片{
高度：15雷姆；
宽度：15雷姆；
}
.警惕{
位置：固定；
排名：0；
左：50%；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
z指数：9999；
颜色：#fff；
字体大小：1.8rem；
字体大小：400；
文本对齐：居中；
边框左下半径：5px；
边框右下半径：5px；
填充：1.6雷姆15雷姆；
-webkit盒阴影：0 2rem 4rem rgba（0,0,0,0.25）；
盒影：0.2rem 4rem rgba（0,0,0,0.25）；
}
.警惕--成功{
背景色：#0ad05b；
}
.警报--错误{
背景色：#eb4d4b；
}
.stars集装箱{
位置：相对位置；
显示：内联块；
颜色：透明；
}
.stars容器：之前{
位置：绝对位置；
排名：0；
左：0；
内容:'★★★★★';
颜色：浅灰色；
}
.stars容器：之后{
位置：绝对位置；
排名：0；
左：0；
内容:'★★★★★';
颜色：金色；
溢出：隐藏；
}
.stars-0:之后{
宽度：0%；
}
.stars-10：之后{
宽度：10%；
}
.stars-20：之后{
宽度：20%；
}
.stars-30：之后{
宽度：30%；
}
.stars-40：之后{
宽度：40%；
}
.stars-50：之后{
宽度：50%；
}
.stars-60：之后{
宽度：60%；
}
.stars-70：之后{
宽度：70%；
}
.stars-80：之后{
宽度：80%；
}
.stars-90：之后{
宽度：90%；
}
.stars-100：之后{
宽度：100；
}
.shipImage{
宽度：200px；
高度：自动；
边界半径：10%；
}
.标志{
宽度：100%；
最大宽度：175px；
高度：自动；
}
.其他船舶{
调整内容：灵活启动；
显示器：flex；
柔性包装：包装；
弯曲方向：行；
调整内容：灵活启动；
}
/*将布局堆叠在小型设备/视口上*/
@介质和全部（最大宽度：575px）{
身体{
网格模板区域：
“标题”
“文章”
“广告”
“导航”
“页脚”；
网格模板行：80px 1fr 70px 1fr 70px；
网格模板列：1fr；
}
.form__组{
显示：块；
}
}
@介质（最大宽度：1250px）{
.内部条款形式，
.复习表格，
形式{
帕
.stars-container {

    position: absolute;
    display: inline-block;
    color: transparent;

}

position:relative;

.stars-container {
  position: relative;
  display: inline-block;
  color: transparent;
}