Сползают или разлазятся блоки

Добрый день!
Есть проблема. Делал сайт своими руками, на компе, на старом мониторе при загрузке в браузере все было вроде норм.
Но когда запустил в сеть, и открыл на более широком экране страницу - начали вылазить проблеммы:
1. в нижней части сайта есть 3 блока, внутри последнего стоит выравнивание текста по центру, но текст уезжает к правому краю.
2. при уменьшении размеров окна - блоки с меню съезжали один под другой(проблему решил, поставив макс. и мин. ширину - вроде помогло - блоки остаются на своих местах, как бы не уменьшал размер окна, но не уверен, насколько это решение правильно)
3. "Гугл посоветовал" вставить в документ тег "<meta name="viewport" content="width=device-width, initial-scale=1.0">" - для удобного просмотра страницы на смартфонах, проблема вылезла сразу в двух местах:
- текст в основной части страницы идет по ширине телефона, но фон остается на мин. ширине, которую задал для всего документа
- заголовок же не позиционируется по ширине телефона, а пляшет опять же от заданного размера мин. ширины
- и все, что находится за пределами главной(инфо) части странички - остается по мин. ширире...
если убираю мин. и макс. ширину в css, тогда весь документ разъезжается, как ему хочется...

сайт: http://keypointquests.com.ua
буду благодарен за любую помощь!!!

0

1:
3. Читайте "Адаптивная вёрстка".

0

Адаптивный дизайн читал, но ответа не нашел
Особенно не могу разобраться с проблемой из п3 - почему весть текст "подстраивается под ширину экрана", то-есть по сути, игнорирует тег "<meta name="viewport" content="width=device-width, initial-scale=1.0">"(в такой позиции текст находится, когда тег не работает), а весь остальной документ его вроде как воспринимает?..

0