html.de - Container verschieben

by SpiceLab

HTML

<div class="nav">
            <ul>
                <li>Startseite</li>
                <li>Minecraft
                    <ul>
                        <li>Statuscheck</li>
                        <li>Verfügbarkeit</li>
                        <li>Bestellen</li>
                    </ul>
                </li>
                <li>Musik Bots
                    <ul>
                        <li>Verfügbarkeit</li>
                        <li>Bestellen</li>
                    </ul>
                </li>
                <li>Kontakt</li>
                <li>Server Status</li>
                <li>Kundenlogin</li>
            </ul>
        </div>
        <section class="container">
           container
        </section>
        <footer>
            <section class="footer">
                <a style="color:white;">PrepaidMiner.de &copy; 2016 - <a href="/impressum.php" style="color:white;">Impressum</a></a>
            </section>
        </footer>

CSS

.nav {
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
  z-index:500 /* Schichtposition */
}
.nav > ul {
  position: relative;
  left: 50%;
}
.nav ul {
  margin:0;
  padding:0;
  float:left;
  height:38px;
  box-shadow:0px 0px 32px 0px #lll;
  border-radius:10px:
}
.nav ul li {
  list-style:none;
  float:left;
  background:#222;
  padding:10px;
  width:85px;
  text-align:center;
  transition:all 500ms;
  color:#999;
  border-right:1px solid #444;
  position:relative;
  border:none;
}
.nav ul li:first-child {
  border-radius:10px 0 0 10px;
}
.nav ul li:last-child {
  border-radius:0 10px 10px 0;
  border:none;
}
.nav ul li:hover {
  background:#09C;
  color:#FFF;
}
.nav ul li:hover ul {
  height:auto;
  opacity:1;
}
.nav ul li ul {
  height:0;
  overflow:hidden;
  opacity:1;
  position:absolute;
  left:0;
  padding-top:15px;
}
.nav ul li ul li {
  width:130px;
}
.nav ul li ul li:first-child {
  border-radius:10px 10px 0 0;
  border:none;
}
.nav ul li ul li:last-child {
  border-radius:0 0 10px 10px;
  border:none;
}
.container {
  height:90%;
  width:1000px;
  top:50px;
  background-color:#ddd;
  /*float:right;*/
  position:relative;
  /*left:-50%;*/
  text-align:left;
  border-radius:15px 15px 15px 15px;
  margin:auto /* ergänzt */
}
.footer {
  position:fixed;
  left:1px;
  bottom:0;
  background-color:#222;
  border-radius:0 10px 10px 0;
}