site niet goed boven 100%

[lubbersvos]

Beste mensen
Wie kan mij een goeie tip geven aan de hand van de codes hier onder van basis css, als ik de site ga vergroten naar meer als 100% wordt het niet meer goed weergeven.

b.v.d Bert
* {
margin: 0;
padding: 0;
}

body {
font-family: Arial, "sans-serif";
color: white;
font-size: 1em;
background-color: darkgray;
background-image: url('../afbeeldingen/achtergrondlichtgrijs.jpg');
}

#websitevak {
width: 98%;
max-width: 1000px;
margin: 1em auto;
border: 1px solid navy;
background-color: white;
}

@media screen and (max-width: 800px) {
#websitevak { width: 95%; }
}

@media screen and (min-width: 1441px) {
#websitevak { width: 65%; }
}

#balkboven {
width: 100%;
padding: 1.5em 0;
background-color: navy;
background-image: url('../afbeeldingen/achtergrondwater.jpg');
background-repeat: repeat-x;
}

@media screen and (max-width: 800px) {
#balkboven { padding: 3em 0; }
}

#balkboven p {
width: 100%;
font-family: Georgia, serif;
font-size: 3em;
font-weight: bold;
text-align: center;
}

@media screen and (max-width: 800px) {
#balkboven p { font-size: 2em; }
}

#balkboven p a {
color: white;
text-decoration: none;
}

#middenstuk {
width: 100%;
background-color: navy;
}

@media screen and (max-width: 800px) {
#middenstuk { background-color: transparent; }
}

#middenstuk:after {
content: "";
display: table;
clear: both;
}

#menu {
width: 20%;
float: left;
border-top: 1px solid white;
}

@media screen and (max-width: 800px) {
#menu { width: 100%; float: none; }
}

#menu ul {
list-style-type: none;
}

#hoofdmenu > li {
float: none;
position: relative;
}

@media screen and (max-width: 800px) {
#hoofdmenu > li { float: none; }
}

#hoofdmenu > li > a {
display: block;
border-bottom: 1px solid white;
color: white;
font-weight: bold;
font-size: 1em;
padding: 1em 1.5em 1em 0.5em;
text-decoration: none;
text-align: left;
}

@media screen and (max-width: 800px) {
#hoofdmenu > li > a { display: block; border-bottom: 1px solid white; background-color: navy; }
}

#hoofdmenu > li > a:hover {
background-color: green;
}

#hoofdmenu > li:hover ul {
display: block;
position: absolute;
top: 0;
left: 100%;
z-index: 2;
}

@media screen and (max-width: 800px) {
#hoofdmenu > li:hover ul { position: absolute; top: 0; left: 8em; }
}

.submenu > ul {
display: none;
}

.submenu > ul > li > a {
display: block;
background-color: navy;
color: white;
width: 4em;
padding: 1em 0.75em 1em 0.25em;
text-decoration: none;
}

@media screen and (max-width: 800px) {
.submenu > ul > li > a { background-color: white; color: blue; min-width: 92%; border-bottom: 1px solid navy;}
}

.submenu > ul > li > a:hover {
background-color: green;
}

@media screen and (max-width: 800px) {
.submenu > ul > li > a:hover { color: white; background-color: navy; }
}


#hoofdvak {
width: 80%;
float: left;
background-color: blue;
}

@media screen and (max-width: 800px) {
#hoofdvak { width: 100%; float: none; }
}

#tekstvak {
margin: 1.5em;
}

@media screen and (max-width: 800px) {
#tekstvak { width: 94%; margin: 1em; }
}

#tekstvak p {
font-size: 0.95em;
line-height: 1.3em;
margin-bottom: 1em;
}

#tekstvak ul, #tekstvak ol {
font-size: 0.95em;
line-height: 1.3em;
margin-bottom: 1em;
margin-left: 2em;
}

#tekstvak ul li, #tekstvak ol li {
position: relative;
left: 2em;
padding-right: 2em;
}

@media screen and (max-width: 800px) {
#tekstvak ul li, #tekstvak ol li { position: static; left: 0; padding-right: 0; }
}

#tekstvak h1 {
font-family: Arial, sans-serif;
font-size: 1.3em;
font-weight: bold;
color: white;
margin-bottom: 1.2em;
}

#tekstvak h2 {
font-family: Arial, sans-serif;
font-size: 0.9em;
color: white;
padding-top: 0.25em;
margin-bottom: 0.25em;
}

#tekstvak img {
max-width: 95%;
}

#extravak {
width: 80%;
margin: 0 auto 1em auto;
padding: 0.5em;
border: 3px ridge darkgray;
}

@media screen and (max-width: 800px) {
#extravak { width: 98%; padding: 0.5em 0; }
}

#inhoudextravak {
margin: 0 auto;
text-align: center;
}

#inhoudextravak > h3 {
font-family: Arial, sans-serif;
font-size: 1em;
color: darkslategray;
font-variant: small-caps;
padding-bottom: 0.6em;
}

#inhoudextravak > p {
font-size: 0.8em;
color: black;
padding: 0.2em 0.2em 0.6em 0.2em;
}

#balkbeneden {
clear: both;
width: 100%;
background-color: navy;
}

#balkbeneden:after {
content: "";
display: table;
clear: both;
}

#inhoudbalkbeneden {
width: 80%;
float: right;
padding: 2em 0;
text-align: center;
background-color: navy;
}

@media screen and (max-width: 800px) {
#inhoudbalkbeneden { width: 100%; float: none; }
}

#inhoudbalkbeneden span {
display: inline-block;
padding: 0.5em 2em;
font-size: .8em;
color: navy;
white-space: nowrap;
border-right: 1px solid white;
}

@media screen and (max-width: 800px) {
#inhoudbalkbeneden span { width: 100%; padding: 0.5em 0em; border-right: 0; border-bottom: 1px solid white; }
}

#inhoudbalkbeneden span:last-child {
border-right: none;
border-bottom: none;
}

#inhoudbalkbeneden span a {
text-decoration: none;
color: navy;
}

.clearfix:after {
content: "";
display: table;
clear: both;
}

.links {
padding: 0.4em 0.8em 0.6em 0;
float: left;
}

.rechts {
padding: 0.4em 0 0.6em 0.8em;
float: right;
}

.gecentreerd {
display: block;
margin: 0 auto 1em auto;
}

.socialmedia {
border: 0;
padding: 0.5em 0.2em;

 

[tiener]

Ik wordt hier niet veel wijzer van. Beetje onduidelijk zonder te zien wat er fout gaat en zonder HTML. Ik kan je vraag alleen beantwoorden als ik de site kan bekijken. Misschien kan iemand anders je helpen?