Элемент с фиксированной позицией с шириной: 100%`занимает меньше, чем полная ширина [закрыто] ⇐ Html

[Anonymous]

Так что мне нужно, чтобы навигалась до 800px, чтобы застрять в верхней части страницы, но не прокручивать со мной.
Я думаю, что лучший способ для этого - изменить его положение на абсолютное. Но когда я проверяю свой код, ширина совершенно неверна, она становится как половина или четверть экрана в зависимости от размера экрана, но когда я проверяю проверку элемента, это говорит о том, что это ширина экрана, несмотря на то, что я вижу, что это так нет.
Я даже не могу начать понимать, почему или что происходит, пожалуйста, помощь.
(я проверил скопированный код, страница выглядит немного сломанной без изображений, но проблема все еще существует) < /p>
html: < /p>




Oef1


[*]

• 
• Oef1
• Oef2
• Oef3

DE HOGESCHOOL



OPLEIDINGEN


INSCHRIJVEN


VAN UNIVERSITEIT NAAR HOGESCHOOL


IK HEB EEN VRAAG







Lorem ipsum

Proin lobortis

Pellentesque egestas

Quisque lobortis

Suspendisse congue

Dec viverra

Sed commodo

Quisque condimentum

Praesent pharetra

Vestibulum eget





© Hogeschool PXL | Elfde-Liniestraat 24 | B-3500 HASSELT




< /code>
css: < /p>

a {
all: unset;
}
a:hover {
color: #4ee307;
}
body {
margin: 0;
}

nav {
position: fixed;
top: 0;
width: 100%;
background-color: black;
height: 80px;
color: white;
z-index: 1000;

.logo {
width: 100px;
}
ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: end;
list-style: none;
align-items: center;
}
li {
width: 10%;
}
li:nth-child(1) {
margin-right: auto;
}
}

/*-------------------------------------*/

main {
margin: auto;
padding-top: 120px;
padding-bottom: 50px;
width: 1200px;
}

section {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 450px;
}
.left{
width: 50%;
position: relative;
}
.right {
width: 50%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.display {
position: relative;
width: 50%;
}
.afbeelding {
z-index: 1;
width: 100%;
}
.link {
z-index: 10;
position: absolute;
top: 10px;
left: 10px;
color: white;
opacity: 75%;
font-family: Arial, serif;
font-size: 16pt;
text-shadow: black 1px 1px 1px;
}

footer {
position: fixed;
width: 100%;
display: flex;
background-color: black;
color: white;
bottom: 0;
justify-content: center;
z-index: 1000;
}

@media screen and (max-width: 1200px) {
body{
width: 100%;
}
html {
width: 100%;
}
}

@media screen and (max-width: 800px) {
nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
border: red solid 1px;
}

footer {
display: none;
}

section {
display: contents;
}
.left .right {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.display {
width: 100%;
}
}
< /code>
Изображение для справки: см., как он говорит, что его ширина 562, но является половиной ширины экрана, которая составляет 564?
Ссылка на то, что я имею в виду < /p>
ivé попробовал разные типы позиций и изменив ширину тегов HTML, но, кроме того, я даже не могу понять, с чего начать.

Подробнее здесь: https://stackoverflow.com/questions/794 ... full-width