Изменять ширину шаблона от разрешения экрана

[Kimono]

Как изменить ширину шаблона сайта в зависимости от разрешения сайта? Добиться нужного результата смог когда поставил в style в параметр max-width поставил 75% вместо 1080 px. На разных мониторах сайт стал отображаться как мне нужно, а до этого он на одном мониторе не помещался, а на другом был слишком узкий! Но вот пришла беда! На телефоне вместо полной ширины как было появился правый отступ! Или когда сужаешь окно браузера меньше 795px, пропадает левый отступ от тела сайта! Помогите пожалуйста исправить
Мой сайт vape-volt.ru
Cкриншоты:
Вот здесь беда
https://yadi.sk/i/0idW4RWTt9a42
Вот здесь всё нормально
https://yadi.sk/i/MpfCU76kt9ZxX
Вот с телефона моя беда
https://yadi.sk/i/kdlKEywCt9a7K

 

[-Vladislav-]

Ваше решение

body.responsive.layout-boxed #page-wrapper {
    margin: 0 auto;
}

 

[Kimono]

Ваше решение

body.responsive.layout-boxed #page-wrapper {
    margin: 0 auto;
}

Спасибо большое за ответ!
Простите за ещё один глупый вопрос, это нужно в моём коде найти и изменить или добавить куда-то в код? Я вставил вроде в код это, на ПК в браузерах решило проблему, но на телефоне теперь отступ появился с двух сторон, а хочется чтобы на телефонах было в полную ширину.
Скриншот:
https://yadi.sk/i/EDRx5MaQt9duk

 

[-Vladislav-]

Код выше для центровки блока, дальше надо со стилями работать под определенные разрешения. Сейчас уже на диване с планшета пишу, - не могу посмотреть. Завтра гляну.

 

[Kimono]

Код выше для центровки блока, дальше надо со стилями работать под определенные разрешения. Сейчас уже на диване с планшета пишу, - не могу посмотреть. Завтра гляну.

Буду очень благодарен за помощь!)

 

[-Vladislav-]

В style.css у вас есть секция
@media (max-width: 1080px) {
//сюда впишите
}

body.responsive #page-wrapper {
    max-width: 100%;
}

 

[Kimono]

В style.css у вас есть секция
@media (max-width: 1080px) {
//сюда впишите
}

body.responsive #page-wrapper {
    max-width: 100%;
}

Я пробовал вставить в два места этот код и не помогло, на телефоне так же всё и осталось(

Скриншоты куда и как вставлял:

Первое место с такой секцией
https://yadi.sk/i/S5Y9AieNtADrx

Второе место с такой секцией
https://yadi.sk/i/qgpp6IcVtADoM

Может было нужно обратно поменять ширину шаблона на 1080px. а то я менял там на 75% , может из-за этого конфликт? Или везде где 1080 px. стоит изменить на 75%

Я убрал ваш код и попробовал изменить обратно размер шаблона с значения 75% на 1080px, так как без кода на телефоне отображался сайт во всю ширину, но на ПК отступы по краям мне жутко не нравятся своими размерами на разных мониторах.
На скриншотах то что получилось:

Вот строка в которой я менял ширину ранее с 1080px, на 75%, сейчас я обратно выставил 1080px
https://yadi.sk/i/XN0tHjjftAF8r

Огромные отступы по краям на мониторе 1600х900
https://yadi.sk/i/PQhXbk6StAEhg

Маленькие отступы но терпимые на мониторе 1360х768, страшно представить что на мониторе 1024x768. плагин корзины наверное залезет на сайт
https://yadi.sk/i/vJ9WcGIXtAEup

Но на телефоне стало отображаться так, как я хочу
https://yadi.sk/i/EZEq8A6HtAF57

Сейчас сайт получается настроен на 1080px как и было изначально всё в шаблоне, но как мне побороть эти отступы? Хочу чтобы они были меньше и на разных мониторах подстраивались самостоятельно

 

[-Vladislav-]

Странно что задвоен медиазапрос, ..возможно разработчику так было удобнее.
Медиа запросы не так сложны, попробуйте разобраться.
Допустим вы вернули сайт обратно к 1080px и вас не устраивает что на больших экранах поля с боку.
Определяете новый медиа запрос, например для мониторов 1600px:

@media (max-width: 1600px) {
//сюда пишите какую ширину хотите для поля сайта
}

например:

@media (max-width: 1600px) {
body.responsive #page-wrapper {
    max-width: 100%;
}
}

Теперь при ширине 1600px сайт будет занимать 100% экрана
(важно - есть принцип наследования - от больших "разрешений экрана" правила передаются для меньших, пока не будут переопределены новым правилом (стилем цсс)

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