[Помогите] Сделать рамку вокруг страницы

Привет всем!


Вот скачал шаблон UrbanNews демо тут http://themes.siiimple.com/themeselector/?theme=UrbanNews , помогите плиз со стилями.
Вопрос не сложный, но я чет не вкуриваю, как правильно сделать рамку вокург странички, чтоб было так (красная рамка)



Я делал так:

Код:

body {
border-top: 1px solid #000 !important;
border-left: 1px solid #000 !important;
border-right: 1px solid #000 !important;
border-bottom: 1px solid #000 !important;
margin-left: 150px !important;
margin-right: 150px !important;
margin-top: 10px !important;
margin-bottom: 10px !important
}

На ноуте отображается нормально, а на планшете верстка едет.

Как сделать правильно? Буду признателен за любую помошь.

Шаб лежит здесь http://morestyle.ru/themeforest/urbannews-premium-wordpress-tema.html

 

В этом шаблоне вёрстка и на ноуте едет то же

Попробуйте засунуть весь контент который необходимо отображать внутри рамки в какой нибудь "жёсткий" ( в таблицу к примеру ) внешний контейнер, а уже на него и пропишите свойства рамки иначе плавать так и будет.

 

Не, на ноуте не едет, нормальный шаб. А как засунуть в контейнер? Я CSS только начинаю изучать, как только не пробовал - ничего не выходит

 

Там шапка, основное содержание и футер представлены дивами. Можно дать им отдельные рамки, например для шапки #section-menu сделать границы наверху, слева и справа
#section-menu {
border-top: 1px solid #000 !important;
border-left: 1px solid #000 !important;
border-right: 1px solid #000 !important;
}
и так для всех элементов контента.

Или просто завернуть все содержание в div, задать ему width и margin: 0 auto;

Например,

<div class="page">
<div class="header">...</div> <!-- Шапка -->
<div class="content">...</div> <!-- Содержание -->
<div class="footer">...</div> <!-- Футер -->
</div>

и в стиле
div.page{
width: 980px;
margin: 0 auto;
}