Hallo,
dein Quelltext enthält Fehler.
Zunächst zum HTML-Quelltext im body-Bereich:
1. Bei der ersten Box "id="box1" fehlt das schließende div, das eingefügt werden sollte.
2. Vor der dritten "id="box3" und vierten "id="box4" Box befindet sich jeweils ein nutzloses p-Element, die gelöscht werden sollten.
3. Hinter der letzten Box und vor dem schließenden body-Tag befinden sich ein schließendes head- und ein öffnendes body-Tag, die dort nichts verloren haben
Dann zum CSS-Quelltext im head-Bereich:
1. #box1
Bei position: absolute ist das float zwecklos, also löschen.
Durch das padding und das margin verschiebt sich das Bild, also auch löschen.
2. #box2
Mit "left: 50px" und "width: 250px" der ersten Box sowie einem Abstand von weiteren 50px zur zweiten Box darf die erst bei 350px beginnen, das "left: 300px" muss also entsprechend angepasst werden
3. #box3 und #box4
Entsprechend müssen auch diese beiden Boxen um 50px nach rechts verschoben werden.
Dann sollte dein Beispiel passen.
Insgesamt solltest du aber auf "position: absolute" verzichten und besser float oder flexbox verwenden um die Bilder anzuordnen.
Und einen Rand oder Rahmen solltest du auch als solchen definieren.
Gruss
MrMurphy