А еще можно делать дизайн не в фотошопе

Все современные сайты построены на дизайне полос.
Полоса так и называется полоса - блок со внутренними отступами сверху и снизу, и с фоном, который отделяет его от соседних полос. Или без фона.

wrapper, container и подобные имена используются для того, чтобы обозначить место для содержимого внутри полосы. Обычно у него установлена максимальная ширина и он стоит посередине полосы. Это сделано для того, чтобы содержимое полосы не растягивалось на всю ширину экрана, потому что для того, чтобы прочесть строку шириной 1920 пикселей на мониторе 22 дюйма надо крутить головой, для этого и задана максимальная ширина.

Поэтому получается достаточно много элементов, вложенных друг в друга. Но понимания полосы, контейнера (или обертки wrapper, container) и ячейки (колонки col-) в-общем, достаточно для того, чтобы разобраться в теории. В bootstrap внутрь container вставляется блок с классом row (строка), внутрь ее - колонки. В Foundation элемент с классом row сам ограничивает свою максимальную ширину, являясь контейнером.

В-общем и целом, вложение одного элемента в другой это и есть главная особенность html.

Вот полоса (занимает всю ширину, имеет внутренние отступы и фон)


Вот контейнер внутри нее (стоит посередине, имеет какую-то максимальную ширину), Правда, в данном случае в нем всего одна колонка


Вот полоса с контейнером, в котором несколько колонок в ряд

Так как основной тег Adobe Photoshop,
то, думаю, помогут «сервисы», располагающиеся тут: