Guten Abend liebe Community,
ich möchte im Aside (rechte Seite) die Bilder zentrieren, ich habe schon einiges ausprobiert aber irgendwas stimmt nicht
HTML
<!doctype HTML>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Puschelreich - Maine Coon Zucht in Brandenburg in der Nähe bei Senftenberg</title>
<meta name="description" content="Maine Coon Zucht aus Annahütte. Hier erfahren Sie alles über unsere reinrassige Zucht der Maine Coon, Kittenkauf, jede menge Bilder.">
<meta name="author" content="Puschelreich - Monique Sommer, David Jähnel">
<meta name="keywords" content="Maine Coon, Kitten, Maine Coon Zucht, Katzenzucht, Katzenbilder, Katzenbabys">
<link href="design.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if IE]>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"
></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<!-- Kopfzeile -->
</header>
<nav id="steuerungoben">
<ul>
<li><a href="index.htm">Startseite</a></li>
<li><a href="puschels/kitten/index.html">aktuelle Würfe</a></li>
<li><a href="aktuelle%20news/index.html">Neuigkeiten</a></li>
<li><a href="Kontakt.html">Kontakt</a></li>
</ul>
</nav>
<div class="flex-container">
<nav id="steuerunglinks">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="puschels/index.html">Puschels</a></li>
<li><a href="bilder.html">Bilder</a></li>
<li><a href="über%20uns%20dosenöffner.html">Über uns Dosenöffner</a></li>
<li><a href="https://www.puschelreich.de/infos/index.html">Infos</a></li>
<li><a href="https://www.puschelreich.de/aktuelle%20news/index.html">Neuigkeiten</a></li>
<li><a href="https://www.puschelreich.de/katzenblog/index.html">Katzenblog</a></li>
<li><a href="https://www.puschelreich.de/Kontakt.html">Kontakt</a></li>
</ul>
</nav>
<section>
<h1>Puschelreich - Maine Coon Zucht</h1>
<p id="starkeschrift">Herzlich Willkommen!</p>
<p>Wir sind eine kleine Zucht der Rasse Maine Coon aus Annahütte im Bundesland
Brandenburg. Unsere Zucht gestalten wir transparent und wollen Euch
liebe Leser und Beobachter im Reich der Puschels verführen.
</p>
<p>Wir wünschen viel Spaß beim stöbern auf unserer Homepage :)
Bei Fragen können Sie uns jederzeit kontaktieren.</p>
<p>Auch Züchterfreunde sind bei uns immer herzlich willkommen.</p>
<hr />
</section>
<aside>
<p>
<img src="Highlight/1.jpg" width="155" height="116" alt="Highlight" title="Highlight">
<img src="Highlight/2.jpg" width="155" height="116" alt="Highlight" title="Highlight">
<img src="Highlight/3.jpg" width="155" height="116" alt="Highlight" title="Highlight">
<a href="https://www.premiumpetshop.de/Premium-Petshop-praesentiert-Top-Katzenblogs"><img width="180"
src="https://www.premiumpetshop.de/mediafiles/Bilder/top-katzenblog-2018.png" alt="Premiumpetshop stellt Top Katzenblogs 2018 vor" title="Premiumpetshop stellt Top Katzenblogs 2018
vor"></a>
<a href="https://www.pawpeds.com/pawacademy/courses/g1/g1students_de.html">
<img src="Pawpeds/G1.png" width="100" height="200" alt="Pawpeds G1" title="Pawpeds G1"></a>
<a href="https://www.pawpeds.com/pawacademy/courses/g2/g2students_de.html">
<img src="Pawpeds/G2RibbonSmall.gif" width="100" height="200" alt="Pawpeds G2" title="Pawpeds G2"></a>
</p>
</aside>
</div>
<footer>
Printerest
Teilen
Startseite
Impressum
Kontakt
Maine Coon Züchter Berlin Brandenburg Dresden
Unser Verein
Katzenblog
</footer>
</div>
</body>
</html>
Alles anzeigen
Code
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: row wrap;
text-align: center;
background-image: url(onewebmedia/Hintergrund2.jpeg);
background-attachment: fixed;
font-family: Arial, sans-serif;
}
header, footer {
flex: 1 100%;
}
section {
flex: 3;
}
aside {
flex: 1;
}
header {
/* background-color: yellow; */
background-image: url(Homepage/Shadow.jpg);
height: 200px;
}
header p {
/* background-color: orange; */
text-align: right;
padding: 15px;
}
#steuerungoben {
/* background-color: red; */
-ms-flex-direction: column;
flex-direction: column;
background-image: url(Bilder/hintergund-grey.png);
}
#steuerungoben ul {
display: flex;
list-style-type: none;
}
#steuerungoben li {
display: flex;
}
#steuerungoben a {
display: block;
width: 15em;
/* background-color: yellow;*/
/*float: left;*/
/* border-right: 1px red solid; */
color: white;
text-decoration: none;
line-height: 24px;
text-align: center
}
#steuerungoben a:hover {
background-image: url(Bilder/hintergrund-black.png);
}
.flex-container {
display:flex
}
#steuerunglinks {
/* background-color: green; */
width: 250px;
}
#steuerunglinks ul {
padding-left: 1em;
padding-top: 20px;
list-style-type: none
}
#steuerunglinks a {
color: #dd9661;
line-height: 30px;
}
aside {
background-color: #808000;
width: 175px;
}
aside p {
display: block;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
section {
/* background-color: orange; */
}
section h1 {
padding-top: 20px;
padding-bottom: 0.4em;
color: #dd9661;
}
section h2 {
color: #dd9661;
padding-top: 1em;
padding-bottom: 0.6em;
}
section p {
padding-bottom: 1em;
}
#starkeschrift {
font-weight: bold;
}
footer {
background-color: brown;
background-image: url(Bilder/hintergund-grey.png);
text-align: center;
color: white;
clear: both;
}
#wrapper {
/* background-color: #eeeeee; */
width: 60em;
margin: 0 auto;
text-align: left;
background-image: url(hintergrund-durch.png);
}
Alles anzeigen
Vielen Dank für Eure Hilfe.
Beste Grüße