Hey Ho,
die Antwort ist ganz einfach, warum bei großer Bildschirmauflösung links und rechts ein breiterer schwarzer Rand erscheint.
Dein schwarzes Feld auf dem Hintergrundbild ist 1060px breit.
Dein #container ist width: 968px;
Wenn nun deine Bildschirmauflösung <= 1280px ist, dann passt der #container schön in das schwarze Feld rein. Wenn allerdings die Bildschirmauflösung > 1280px wird, dann erscheint der Rand immer breiter, bis hinzu 46px links und rechts. Um dem zu entgehen, mach einfach das schwarze Feld in der Mitte kleiner, bevor du das Bild als Hintergrund nimmst. Max. 968px darf das Feld breit sein, wenn überhaupt. Denn eigentlich brauchst du dies ja nicht mal, da du um dein Layout schon ein border mit 3px und color #000000 gelegt hast.
Oder aber du versuchst dein #container bzw. dein ganzes css Layout auf 1060px Breite auszulegen und dieses dann beim verkleinern der Auflösung automatisch anzupassen.
______________
mfg
SEO 