Gib doch auch ein min-width für den container an, so verhinderst du den Effekt, dass da Bild aus der Box fliesst.

Overflow: hidden; wäre auch noch ne alternative oder mit Scrollbalken, overflow: scroll; (oder auto)

LG

Wenn du für die position relative verwendest, so wird dieses Element aus dem normalen Dokumentfluss genommen und eine Positionierung erwartet. Du könntest jetzt auch H1 relative positionieren.

Warum formatierst du nicht nur h1?

MIt dem Beispiel hast du die gewünschte Anzeige mit h1 in einem schwarzen Kasten, ev. wäre es noch schön, "border-radius" zu verwenden, damit kannst du die Ecken abrunden, du kannst jede Ecke einzeln definieren, oder sogar eliptische Formen ersellen...(Google hilft) Achtung, Beispiel nicht getestet, kann noch Mängel aufweisen. LG

h1 {
  text-align: center;
  font-family: arial, helvetica, sans-serif;
  font-color: white;
  font-size: 24pt;
  line-height: 200px;
  width: 90%;
  background-color: black; 
  overflow: hidden;
}