мне скинули макет, скажите как мне понять по какой ширине верстать? должны ли быть отступы от окна браузера или нет?

В макете же есть отступы – значит должны быть.
Ширину задаете в % – оптимально 90% (+/-), центруете, а max-width берете из макета:
в вашем примере у каждого блока своя ширина контента, измеряете ее – это и будет ваш max-width для текущего блока. Дальше измеряете и задаете ширину следующего блока и так до конца макета.

В смысле "по какой ширине"? Каждый логический блок верстаешь по макету, но резиново (чтобы сжималось насколько возможно, и тянулось до макетных размеров + относительные единицы). Затем с помощью медиазапросов пилишь мобильные версии под средний и мелкий размеры (работая с тем что резиновая верстка не решила).
‎
Отступы конечно нужны, слева и справа - а то неприятно когда основной контент "липнет" к краям вьюпорта. Не нужны они только для CTA/баннеров в некоторых дизайнах, но в макете видно что отступ есть и у CTA... значит, так и делай (ошибки дизайна страницы - это не проблема верстальщика).
Другое дело если к макету были пояснения... просто часто бывает такая ситуация: дизайнер нарисовал по требованиям заказчика, но заказчик олень, и на самом деле хочет другое - появляются дописки типа "такой-то блок должен быть во всю ширину, а вон тот вообще не нужен, а те картинки это на самом деле карусель".

1200px (максимальная ширина контента), вокруг - фон.
768px (100%)
500px (100%)

макет в каком формате? Я так понимаю это фотошоп? он не в psd? посмотри в настройках сколько ширина
Вот как бы стандарт https://yadi.sk/i/BBHTJ4ky2su8Pw bootstrap