Hallo zusammen!
Ich bin gerade dabei, eine Website zu erstellen. Da hat allerdings unterhalb des Hero-images, wo der Main-bereich angrenzt, rechts davon eine art "margin". Auf jeden Fall ist der Main-Bereich linksbündig am Bildschirm (was ja standard ist) und hat rechts noch einen Abstand (Siehe Bild im Anhang, der grüne Rahmen ist der Main-Bereich)
[Blockierte Grafik: http://fs5.directupload.net/images/160613/i7xb9gcg.png]
Ich habe versucht, die width von der main auf 100% zu stellen, aber dann schaut die (warum auch immer) rechts über den Header usw raus.
Hier wäre der entsprechende Code:
HTML
<main>
<div class="left">
<h3>xXXXXXx:</h3>
<hr />
<br />
<span>
<h1 class="leitspruch">asdf.</h1>
Text Text Text Text
</span>
<span>
<h1 class="leitspruch">dghsdfg.</h1>
Noch mehr Text
</span>
<span>
<h1 class="leitspruch">üölkjh.</h1>
Am meisten Text
</span>
<br />
</div>
<div class="right">
<h3>Anschrift & Kontakt</h3>
<hr />
<br />
<h1 class="kontaktname">asdyxcv</h1>
<br />
ölkjhgf<br />
Straße xX<br />
00000 Beispielstadt<br />
<br />
Tel: 0123 45678<br />
eMail: <a href="mailto:xxXXXX@xxx.de">Mail</a>
<br />
<br />
<a href="visitenkarte.pdf" download>Visitenkarte herunterladen (PDF)</a><br />
<a href="https://get.adobe.com/de/reader/" style="font-size: 15px;">PDF-Reader herunterladen</a>
<br />
<br />
</div>
</main>
Alles anzeigen
CSS
body {
padding: 0px;
margin: 0px;
color: white;
font-family: Arial;
background: linear-gradient(to right, rgba(63,67,69,1) 0%, rgba(35,160,255,1) 20%, rgba(35,160,255,1) 80%, rgba(63,67,69,1) 100%);
height: 100%;
line-height: 22px;
}
main {
padding: 60px;
display: inline-block;
}
.left {
float: left;
margin: 15px;
width: 60%;
position: relative;
}
.right {
float: right;
margin: 15px;
width: 30%;
position: relative;
}
Alles anzeigen
Vielen Dank euch für die Hilfe!