Die fertige Seite lässt sich nach rechts scrollen. Der gesamte Inhalt steht auf der Seite und ragt nicht darüber hinaus, das Hintergrundbild endet exakt am rechten Screenrand, danach kommt aber noch ein weisser Streifen, ist aber nicht die background-Farbe.
Ich habe alle margins und paddings getestet, aber nichts gefunden. Meistens liegt es wohl daran.
Ich bitte um Tipps, was ich noch tun könnte, bzw. wie.
Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Start Lang Cosmetics</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<style>
*{
margin:0;
padding:0;
}
body ,html{
display: flex;
flex-direction:column;
font-family: "Century Schoolbook L";
color: #993399;
background: whitesmoke;
background-image:url(/image/wald.jpg);
min-height:100vh;
height:100%;
}
#body_footer,
#body_left,
header,
#body_right,
#main_top,
#body_right,
footer
{
background: rgba(199, 199, 249, 0.95);
font-family: "Century Schoolbook L";
text-align: left;
font-size: 1em;
color: #953195;
justify-content:space-around;
margin:10px;
border:1px solid black;
}
header {
display:flex;
max-height:80px;
}
header h1 {
font-size: 2em;
flex:5;
align-self: center;
padding:0 10px;
}
#bild1,#bild2{
max-width:200px;
flex:1;
}
#bild1 img ,#bild2 img{
width:100%;
max-height:100%;
}
main{
display:flex;
flex-direction:column;
flex:1;
}
#main_top{
display:flex;
padding:10px;
}
#main_body{
display:flex;
flex:3;
}
#main_body_2{
display:flex;
}
#angebot{
display:flex;
flex-direction:column;
flex:5;
}
#angebot h2{
font-weight:900;
padding:10px;
}
#Fotoweg{
flex:2;
}
#Fotoweg img{
width:100%;
}
#body_left{
display:flex;
flex-direction:column;
flex:2;
padding:10px;
}
#body_right{
flex:1;
padding:10px;
}
ul {
display:flex;
flex-direction:column;
padding-left:15px;
}
ul li{
}
#body_footer{
padding:10px;
text-align:center;
}
footer {
padding:10px;
}
@media all and (max-width:700px) {
#main_body{
flex-direction:column;
}
#Fotoweg{
display:none;
}
header{
max-height:20%;
font-size:14px;
}
#bild1{
flex:3;
}
#bild2{
display:none;
}
}
.big{
font-weight:900;
}
</style>
</head>
<body>
<header>
<h1>Herzlich Willkommen bei LANG Cosmetics</h1>
<div id="bild1">
<img src="/image/logo-die-welt-und-ich-logo.webp">
</div>
<div id="bild2">
<img src="/image/logo-die-welt-und-ich-logo.webp" alt="Logo MG">
</div>
</header>
<main>
<div id="main_top">
<h2>Seit 1976 für unsere Kunden zuverlässig am selben Ort.</h2>
</div>
<div id="main_body">
<div id="body_left">
<div id="main_body_2">
<div id="angebot">
<h2>Wir verwöhnen Sie mit Produkten von Maria Galland
und Ayer <br>in entspannter Atmosphäre:
</h2>
<ul>
<li>Maria Galland Beauty Treatments</li>
<li>Gesichtspflege mit Ayer</li>
<li>Maniküre</li>
<li>Medizinische Fußpflege</li>
<li>Fußreflexzonenmassage (System: Hanne Marquardt)</li>
<li>Pediküre, auch mit Lack</li>
<li>Enthaarung / Wachs</li>
<li>Brauenfärben</li>
<li>Wimpernfärben</li>
</ul>
</div>
<figure id="Fotoweg">
<img src="/image/Logo_ZDFtivi.svg" alt="Foto">
</figure>
</div>
</div>
<div id="body_right">
<p class="big">Unsere Geschäftszeiten: </p>
<p>Mo, Di, Do, Fr: 9 – 18 Uhr </p>
<p>Mi: 9 – 12 Uhr </p>
<br>
<p>Und nach Vereinbarung. </p>
<br>
<p class="big">Behandlungen nur <br>
nach telefonischer Vereinbarung</p>
<br>
<p class="big">Tel.: 089-932299</p>
<br>
<p>LANG Cosmetics</p>
<p>81927 München, Ostpreussenstr. 35</p>
</div>
</div>
<div id="body_footer">
<p>Falls Sie gerade verhindert sind persönlich bei uns Ihre gewohnten Produkte einzukaufen, können Sie das hier auch bequem direkt Online machen:<br>
<b>Maria Galland:</b> <a href="http://www.mariagalland.com/de_DE/home?INSTid=6021035" id="BG_1596540997012_32169" target="_blank">Maria Galland Online Shop</a>
<b>Ayer:</b> <a href="https://ayer-cosmetics.com/de/?sPartner=anette-lang" target="_blank">Ayer Online Shop</a></p></div>
</main>
<footer>
<a href="file:/home/hans/Homepage_final/Home_neu_final-Dateien/Impressum_Datenschutz_neu.html" target="_blank">Impressum und Datenschutz</a>
</footer>
</body></html>