Überschrift breitet sich zu weit aus

[dre]

»»klingt nach einem Fall für position:inline-block;

Sorry, habe das zentriert anscheinend überlesen.

Eine Möglichkeit wäre, die Box im html vor die Überschrift zu schieben, also

<div id="main">  
			<div id="box"></div>  
			<h1>Hallo Welt!</h1>  
  
			  
		</div>

Und dann der box ein float:right; zu verpassen.

Der div#text ist nicht notwendig, das text-align:center; kannst du auch dem h1 verpassen.

Gruss