我正在为自己创建一个投资组合网站，并且我不想为此使用任何外部UI库。我想制作一个“容器”，页面左右边缘有2.5vw的余量。内部内容的宽度为95vw。在800像素下进行测试时，内部内容的宽度确实为760像素。但是左边距似乎在4-4.5vw之间，右边距0.5-1vw之间。 Chrome浏览器检查器显示的唯一边距是每边20像素，这是不正确的。
我尝试将整个车身宽度设置为95vw，边距：0 2.5vw。我也尝试过取出导航栏宽度，调整其位置（不知道为什么要测试它，因为我希望在整个站点上使用它）。我已经在Chrome，Firefox和Opera上打开了文件，每个文件的结果相同。
这是带有前几行的HTML。
<body>
<div class="container">
<nav class="top-nav">
<ul class="nav-list">
<li><a href="#">Home</a></li>
以及随附的CSS。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: yellow;
}
.container {
background-color: blue;
width: 95vw;
margin: 0 2.5vw;
}
.top-nav {
background: green;
opacity: 0.1;
position: fixed;
top: 0;
left: 2.5vw;
width: 95vw;
}
我期望2.5vw（左边缘）95vw（宽度）2.5vw（右边缘），但是越来越接近4.5vw（左边缘），95vw（宽度），0.5vw（右边缘）。就其价值而言，转换为百分比确实可以，但是我想尽可能使用相同的单位。
最佳答案
您的样式似乎正常。
可能您还没有发布其他样式的问题
看到你的代码工作：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: yellow;
}
.container {
background-color: blue;
width: 95vw;
margin: 0 2.5vw;
height: 50px;
}
.top-nav {
background: green;
opacity: 0.9;
position: fixed;
top: 0;
left: 2.5vw;
width: 95vw;
height: 30px;
} <div class="container">
<nav class="top-nav">
<ul class="nav-list">
<li><a href="#">Home</a></li>
</ul>
</nav>
</div>