Element mit festem Position mit "Breite: 100%" nimmt weniger als die volle Breite [geschlossen] ⇐ CSS

[Anonymous]

Also muss ich den Navigationsraum unter 800px haben, um am oberen Rand der Seite festzuhalten, aber nicht mit mir scrollen. Aber wenn ich meinen Code überprüfe, ist die Breite völlig falsch, es wird je nach Bildschirmgröße wie die Hälfte oder ein Viertel des Bildschirms, aber wenn ich das Element überprüfen kann, heißt es, dass es die Breite des Bildschirms ist, obwohl ich sehe, dass es ist, dass es ist Nicht.
Ich kann nicht einmal verstehen, warum oder was passiert, plz Hilfe.
(Ich habe den kopierten Code überprüft, die Seite sieht ohne die Bilder ein wenig kaputt aus, aber das Problem ist immer noch da) < /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





&copy; 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>
Bild als Referenz: Sehen Sie, wie es sagt, dass seine Breite 562 ist, ist aber die Hälfte der Bildschirmbreite, die 564? Ivé hat verschiedene Positionstypen ausprobiert und die HTML -Tags Breite geändert, aber abgesehen davon kann ich nicht einmal verstehen, wo ich anfangen soll.