CSS Problémy s umiestnením / zmenou veľkosti - html, css, css3, media-queries

pre niektorých je to jednoduchý problém, takže mi odpusť za takú základnú otázku. Mám ťažkosti s umiestnením vrstvy div #section-1, v podstate chcem obsah v rámci <div> zostať na mieste, keď zväčším veľkosť obrazovky. Kliknite tu

Nedokážem to dosiahnuť. Stanovil som #section-1 s nasledujúcimi vlastnosťami:

    #section-1{
position: relative;
width: 100%;
}

Tiež som si nastavil môj #wrapper nasledujúcim spôsobom:

#wrapper{
max-width: 1600px;
min-width: 320px;
width: 100%;
margin: 0 auto;
position: relative;
}

Skúsil som zadať maximálnu šírku # section-1 a použiť okraj: 0 auto; obsah v sekcii 1 sa však pri zväčšovaní veľkosti obrazovky stále pohybuje.

Má niekto riešenie problému ...?

odpovede:

Pre okraje so šírkou 100 pixlov na každej strane:

#section-1{
position: relative;
margin: 0 100px;
}

Upozorňujeme, že to funguje s alebo bez vášho obalu - zdá sa, že veľa CSS vo vašom obale nie je potrebné.