Я создаю сайт портфолио для себя и не хочу использовать для этого внешние библиотеки пользовательского интерфейса. Я хотел сделать «контейнер», в котором было бы поле 2.5vw на левом и правом краях страницы. Внутреннее содержимое будет иметь ширину 95vw. При тестировании с разрешением 800px внутреннее содержимое имеет ширину 760px. Но левый край, кажется, находится где-то между 4-4.5vw, и правый край 0.5-1vw. Единственное поле, которое показывает Chrome Inspector, составляет 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 (правый край). Для чего бы это ни стоило, конвертация в проценты работает, но я бы хотел использовать как можно больше единиц измерения.