Flexboxen

[Matthias Apsel]

Hallo delbor,

MrMurpys Hinweis schließe ich mich an.

Der Abstand nach oben entsteht (im Firefox) durch das Browser-CSS

p, dl, multicol {
    display: block;
    margin-block-end: 1em;
    margin-block-start: 1em;
}

Abhilfe liefert

#Titelbox2 {
    margin: 0 25%;
}

Insgesamt würde ich den header anders gestalten:

<header>
    <p id="Titelbox1"> Willkommen auf den Seiten von</p>
    <p id="Titelbox2"> roase.ch </p>
    <p id="Titelbox3"> Rogers Oase im Internet</p>
</header>

Überschriften sind sehr wichtige Elemente, wenn du im Internet gefunden werden möchtest.

<header>
    <h1>
         <span>Willkommen auf den Seiten von</span>
         <span>roase.ch</span>
         <span>Rogers Oase im Internet</span>
    </h1>
</header>

header h1 span {
    display: block;
}
header h1 span:nth-of-type(2) {
    text-align: center;
}
header h1 span:nth-of-type(3) {
    text-align: right;
}

liefert dir, was du brauchst - ohne margins oder Breitenangaben.

Den Rest bekommst du auch hin - Was soll die transition da?

header h1 span {
	display: block;
	color: #ffff00;
	font-style: italic;
	border: 2px solid #ffff00;
	font-size: .5em;
        text-shadow: 1px 1px #ff0000, 2px 2px #ff0000, 3px 3px #ff0000;
}
header h1 span:nth-of-type(2) {
	text-align: center;
	background-image: linear-gradient(#0000ff, #00ffff, #00ffff, #0000ff);
	border-width: 1px;
	border-radius: 50px;
	font-size: 1.5em;
}
header h1 span:nth-of-type(3) {
	text-align: right;
}

Jetzt erst kommen einige Breitenangaben sowie ein bisschen padding und margin ins Spiel.

Das ist eine Möglichkeit, es mag bessere geben.

Bis demnächst
Matthias