Html css元素在创建时与其他元素对齐

你好，今天我开始了一个新项目，前三名排行榜，我唯一的问题是， 每次我添加一个元素时，我的元素都在我的下文本之后

有问题的例子：

毫无疑问：

这是html`

正文{
背景图像：线性渐变（向右，#422ea8 0%，#644696 100%）！重要；
字体系列：“蒙特塞拉特”，无衬线！重要；
字体重量：700！重要；
}
马金博迪先生{
边缘顶端：7em；
最小宽度：19%；
最大宽度：19%；
文本对齐：居中；
背景色：#c3c6ca；
显示：内联块！重要；
左侧边缘：6em；
边界半径：25px；
盒影：10px 5px 0px#644696；
}
处女座{
宽度：5em；
边缘顶部：1米；
}
马金兰克先生{
边缘顶部：-1米；
}
.圆圈{
文本对齐：居中；
背景色：白色；
边界半径：50%；
宽度：4em；
最小高度：4em；
}
.内圆{
边缘顶部：1.2米；
颜色：#422ea8；
}
.insideBar{
背景色：白色；
最小宽度：11em；
最大宽度：11em；
文本对齐：居中；
利润率：自动-2%；
颜色：#422ea8；
}
马金西尔先生{
边缘顶部：1米；
边缘底部：2米；
}
.maxHeightText{
最大高度：2米；
}
.boxTop3{
显示：块！重要；
宽度：60%；
浮动：对；
边缘顶端：7em；
最小高度：27em；
右边距：11em；
最大高度：27em；
文本对齐：居中；
}
.33{
最小宽度：33%；
最大宽度：33%；
}

用户名

排名

VGO

10000

10000

10000
用户2

500000 VGO
用户1

用户3

欢迎使用堆栈溢出！寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的代码。见Thx，我做到了：）