问题如题所示，容器内的三个div本该水平居中，两旁有28.5/40rem的margin但是没有生效，先是百度了一下，但是相关的原因都是和浏览器默认字体最小是12px有关，但是我设置的明显是大于这个值的，所以没能找出问题所在。
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./fa/css/all.min.css">
<title>爱学习</title>
</head>
<body>
<!-- 创建头部的容器 -->
<header class="top-bar">
<div class="menu-btn">
<a href="#">
<i class="fas fa-stream"></i>
</a>
</div>
<h1 class="logo">
<a href="#">
爱学习
</a>
</h1>
<div class="search-btn">
<a href="#">
<i class="fas fa-search"></i>
</a>
</div>
</header>
</body>
</html>
css代码如下：
* {
margin: 0;
padding: 0;
}
.w,
.top-bar {
width: 693/40rem;
margin: 0 auto;
}
html {
font-size: 100vw/750 * 40;
background-color: #eff0f4;
}
.top-bar {
display: flex;
height: 175/40rem;
line-height: 175/40rem;
}
关键解决方案附带网址 https://blog.csdn.net/weixin_43524214/article/details/113803531
关键在于是我看的视频里莫名其妙没有加我上述的这种情况就生效了，大概是版本问题，不过这次我开始以为是px vw rem这些在移动端不同手机型号和pc端下（包括是否完美窗口适配）的问题，花了几个小时疯狂折磨自己思考，但一切想通以后，发现自己就是个sb，根本没想明白自己该怎么问，确定了问题之后，一搜就搜到了是less自身的问题。
给.top-bar加个width属性就行了
但好恶心的是，我重新写了一遍代码，和原来一模一样，居然Tm生效了，，我真的吐了！~
我也显示不出来，但是看资料里的基本是一模一样，如果是（693/40）rem,那么css中数值和rem之间会有个空号，导致数值没办法再网页中生效，如果不加括号不会进行计算。我后来看了链接，改成了(693rem/40)就可以行的通了，但是还是不太明白