Darstellung wird gequetscht und nicht gescrollt

[Verena]

Liebe Forum-Gemeinde,

ich habe mir eine neue Homepage gebastelt und dieses Mal habe ich eine Layout-Vorgabe von selfhtml verwendet (Nr. 10). Ich bin super zufrieden mit der Seite und fülle sie nun nach und nach mit meinen Bildern. Was mich aber sehr murkst und mich ein wenig traurig macht ist die Tatsache, dass bei einer Verkleinerung des Browserfensters meine Inhalte gequetscht werden und kein Scrollbalken entsteht.

Ich habe schon mehrere Dinge mal getestet, aber ich finde den Fehler einfach nicht in meinem Code :(

Ich hoffe, sehr, dass ich über das Forum einen hilfreichen Hinweis erhalte, damit ich dieses Problem bald lösen kann.

Hier der CSS-Code meiner Seite:

``

body {
  background: url(../img/bg1.jpg) white;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
  color: black; margin: 0; padding: 1%;
  filter: Shadow(color=#dbbdb3, direction=0)
  filter: Shadow(color=#95918f, direction=90)
  filter: Shadow(color=#95918f, direction=180)
  filter: Shadow(color=#95918f, direction=270)
  min-width: 640px;
  font-size: 100.01%;
  font-family: garamond, arial, sans-serif;

}

a { color: #0B4D8C; text-decoration: underline; }
a:visited { color: #553b62; }
.skip {
  position: absolute;
  margin-left: -999px;
  width: 990px;
}
h1 {
  font-size: 2.4em; font-weight: normal; line-height: 0.8em; padding: 0.6em 0 0.2em 0%; margin: 0; border-bottom: 1px dashed #E6E6FA;
}
h2, h3, h4 { font-weight: normal; }
h1, h2, h3, h4, h5, h6 {
  color: black; font-family: Garamond, "Times New Roman", Times, serif;
}
img {
  border: solid 0px #aaa; padding: 0px; max-width: 100%;
}
.fleft {
  float: left; margin: 0 1em 0.2em 0;
}
.fright {
  float: right; margin: 0 0 0.2em 1em; padding: 1px;
}

#container {
  font-size: 0.8em;
  max-width: 78em;
  margin: auto;
  height: auto;
  border-left: 0px solid #3c3735;
  border-right: 0px solid #3c3735;
  border-top: 0;
  background-color: white;

}

#footer {
  clear: both; padding: 0 20px;
}

#logo {
  background: url(../img/oben.jpg) 0 0 no-repeat white;
  height: 140px; padding: 0 05px; text-align: left; line-height: 180px; font-size: 54px; letter-spacing: -3px; margin: 0;
}
#logo a {
  color: white; text-decoration: none;
}
#logo a span {
  color: black; background: white; padding-right: 0.1em; font-weight: bold;
}

#menu {
  background: url(../img/men&uumlhintergrund.png) white;
  padding:0px 5%;
  margin: 0;
  text-align: right;
  color: #272121;

}
#menu li {
  font-size: 1.2em;
  display: inline;
  list-style-type: none;
  border-left: 1px solid black;
  padding: 0 10px 0 15px;
  font-weight: bold;

}
#menu li a {
  color: #8f8d8d;
  text-decoration: none;
}
  #Banner {
 background-image: url(../img/Banner.jpg);
 background-position:center;
 padding:0px;
 background-color:white; height:400px;
 margin: auto;
}

#subnav {
  width: 26%;
  min-width: 10em;
  float: right;
  padding: 70px 1% 1em 1%;
  margin: 1em 1% 0 1%;
  border-left: 1px dotted #aaa;
  font-size: 1.2em;

}
#subnav dt {
  font-size: 1.2em;
  font-family: Garamond, "Times New Roman", Times, serif;
  padding: 0.5em;
  margin-top: 1em;
  border-top: 1px dotted #aaa;
}
#subnav dd {
  padding: 0;
  margin: 0.2em 0;
}

#main {
  padding: 0 31% 0 20px;
  line-height: 1.5em;
}
 #footer .footer-col {
WIDTH: 202px; FLOAT: left; MARGIN-RIGHT: 30px
}
#footer #footer-widget-col-4 {
MARGIN-RIGHT: 0px
}
#copyright-footer-sep {
PADDING-BOTTOM: 0px; PADDING-LEFT: 0.3em; PADDING-RIGHT: 0.3em; PADDING-TOP: 0px
}
SPAN.statcounter {
DISPLAY: inline
}
#footer {
PADDING-BOTTOM: 30px; LINE-HEIGHT: 1.4em !important; PADDING-LEFT: 30px; PADDING-RIGHT: 30px; PADDING-TOP: 30px
}
#footer H3 {
FONT-STYLE: normal; FONT-FAMILY: "Century Gothic", Helvetica, Arial, sans-serif; COLOR: #666666; FONT-SIZE: 17px
}
#footer {
BACKGROUND: #f0f0f0 left top
}
#copyright-footer {
TEXT-ALIGN: center; PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 11px
}