Hallo zusammen,
seit Ewigkeiten bastel ich wieder an einem kleinen Template und habe meine Probleme mit dem CSS. Es geht um folgenden Code:
Warum bekomme ich "header-wrapper" nicht mittig platziert? Funktionierte das nicht eigentlich mit fester Breite und "margin: 0 auto;"?
Vielen Dank schon mal für Eure Hilfe.
seit Ewigkeiten bastel ich wieder an einem kleinen Template und habe meine Probleme mit dem CSS. Es geht um folgenden Code:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>123</title>
<style>
body {
width: 100%;
padding: 0;
margin: 0;
color: #383838;
font-family: "Lato", sans-serif;
font-size: 100%;
line-height: 1.6;
}
.website-wrapper {
width: 100%;
}
.header {
width: 100%;
}
.header-wrapper {
width: 100%;
position: fixed;
background: aqua;
max-width: 1300px;
margin: 0 auto;
padding: 0 2em;
box-sizing: border-box;
}
.header-logo-wrapper {
float: left;
}
.header-nav-wrapper {
float: right;
}
.header-nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
.header-nav li {
float: left;
}
.header-wrapper a {
display: block;
text-decoration: none;
text-transform: uppercase;
color: #383838;
padding: 1em;
}
</style>
</head>
<body>
<div class="website-wrapper">
<header class="header">
<div class="header-wrapper">
<div class="header-logo-wrapper">
<a href="#">|Logo|</a>
</div>
<div class="header-nav-wrapper">
<ul class="header-nav">
<li>
<a href="#">LinkEins</a>
</li>
<li>
<a href="#">LinkZwei</a>
</li>
<li>
<a href="#">LinkDrei</a>
</li>
<li>
<a href="#">LinkVier</a>
</li>
</ul>
</div>
</div>
</header>
<main class="main">
<div class="main-wrapper">
<section class="atmo">
</section>
</div>
</main>
<footer class="footer">
<div class="footer-wrapper">
</div>
</footer>
</div>
</body>
</html>Warum bekomme ich "header-wrapper" nicht mittig platziert? Funktionierte das nicht eigentlich mit fester Breite und "margin: 0 auto;"?
Vielen Dank schon mal für Eure Hilfe.
