Как выравнивать содержимое по горизонтали и фиксировать влево?

Question

Я хочу создать страницу так, чтобы весь контент находился посередине страницы. Но по мере того как я изменяю размер браузера, содержимое идет до минус слева, и я не могу даже прокрутить его.

Я хочу что-то вроде этого: https://www.apple.com/au/mac/.

Здесь весь контент посередине, и если я изменил размер браузера на меньшую ширину, я все равно прокручу по горизонтали, чтобы увидеть весь контент.

Я пробовал что-то подобное, но когда я изменяю размер браузера, мой контент выходит за левое поле, и я не могу прокрутить влево.

Это код.

CSS:

html, body 
    width: 100%; height: 100%; 



main 
    position: absolute; top:0; left: 0; 
    width: 1000px; height: 100%; 
    left: 50%; margin-left: -500px; 
    border: 1px solid; 

Answer 1

не используют позиции абсолюта. попробуйте этот стиль для вашего основного:

.main { margin: 0 auto;} 

Answer 2

Спасибо Ятин. Я пробовал это, и это сработало!

html, корпус ширина: 1024px; высота: 100%; переполнение: авто; margin: auto; позиция: абсолютная; верх: 0; left: 0; bottom: 0; право: 0;

Главный

position: relative; 
background-color: grey;