Html 我的代码中是否存在阻止<；div class="；评级&燃气轮机；从水平方向靠近屏幕中心开始？

实际上，有两个问题：

（1） 我的代码中有什么东西会阻止

靠近中心吗？我可以添加什么来将其水平移动到更靠近中心的位置？（旁注：CSS布局和定位对我来说仍然是个谜。我仍然不明白设置边距或宽度会影响位置/布局，并阻止它执行我希望它执行的操作。）

（2） 当窗口未最大化时，为什么

不在视口中？我能做些什么来解决这个问题

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体系列：“斯巴达”，无衬线；
字体大小：15px；
}
.集装箱{
高度：100vh；
背景图像：url（'./images/bg-pattern-top-desktop.svg'）；
背景重复：无重复；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.内容{
显示器：flex；
弯曲方向：立柱；
宽度：77%；
}
.顶{
显示器：flex；
弯曲方向：行；
}
.头衔{
颜色：hsl（300,43,22%）；
宽度：25%；
保证金：自动；
}
.明星{
显示：内联；
右边距：30px；
}
.评级{
颜色：hsl（300,43,22%）；
字体大小：粗体；
空白：nowrap；
背景色：hsl（300,24,96%）；
填充：15px 50px 15px 25px；
边界半径：.5em；
利润率：10px；
}
.底部{
显示器：flex；
弯曲方向：行；
边缘顶部：20px；
}
.评论{
背景色：hsl（300,43,22%）；
边界半径：.5em；
颜色：白色；
填充：25px；
利润率：15px；
}
.意见跨度{
颜色：hsl（333,80,67%）；
}
.评论p{
字体重量：较轻；
填充顶部：20px；
}
.作者img{
边界半径：50em；
}

10000多名用户喜爱我们的产品。

我们只提供优质的产品和优质的客户服务。
了解我们满意的客户对我们服务的看法。

评为5颗星
在报告大师中被评为5颗星
在BestTech中被评为5颗星
科顿-史密斯
核实买方

“我们需要与一周前订购的相同的印刷设计。他们不仅找到了原始订单，而且我们也及时收到了。
太好了！”

艾琳·罗伯茨
核实买方

“客户服务总是非常出色，而且周转速度非常快。对购买的简单性和交付的速度非常满意。”

安妮·华莱士
核实买方

“向这家公司下订单，只能称赞他们的高标准。一定会再次使用并推荐给大家！”

将

高度：100vh

更改为

最小高度：100vh

，这将为

集装箱提供增长空间。目前，它仍然是
100vh
，这将其内容推到了边界之外

此外，您还需要将
对齐内容：居中
添加到
。顶部
并从
中删除
边距：自动
。标题
将收视率进一步向左移动：


*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体系列：“斯巴达”，无衬线；
字体大小：15px；
}
.集装箱{
最小高度：100vh；
背景图像：url（'./images/bg-pattern-top-desktop.svg'）；
背景重复：无重复；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.内容{
显示器：flex；
弯曲方向：立柱；
宽度：77%；
}
.顶{
显示器：flex；
证明内容：中心；
}
.头衔{
颜色：hsl（300,43,22%）；
宽度：25%；
}
.明星{
显示：内联；
右边距：30px；
}
.评级{
颜色：hsl（300,43,22%）；
字体大小：粗体；
空白：nowrap；
背景色：hsl（300,24,96%）；
填充：15px 50px 15px 25px；
边界半径：.5em；
利润率：10px；
}
.底部{
显示器：flex；
弯曲方向：行；
边缘顶部：20px；
}
.评论{
背景色：hsl（300,43,22%）；
边界半径：.5em；
颜色：白色；
填充：25px；
利润率：15px；
}
.意见跨度{
颜色：hsl（333,80,67%）；
}
.评论p{
字体重量：较轻；
填充顶部：20px；
}
.作者img{
边界半径：50em；
}

10000多名用户喜爱我们的产品。

我们只提供优质的产品和优质的客户服务。了解我们满意的客户对我们服务的看法。