webhero

Макеты попадаются даже близко не использующие намек на сетки, поэтому за уши притягивать инструмент, который для сего не предназначен, мягко говоря, не имеет никакого смысла. Не будете же вы крутить крестовой шуруп газовым ключем?

Картинкой и верстайте, в чем проблема? Задаете блоку в качестве бэкграунда эту картинку, а поверх накладываете все остальное.

такое лучше через псевдоэлемент. Основной Ваш див , например

.block {
position: relative;
width: 200px;
height:300px;
background-color: #fff;
}

.block::before {
content: "";
z-index: 1;
position: absolute;
width:180px;
height: 280px;
top: 10px;
left: 10px;
border: 2px solid blue; }
Только имейте ввиду, что все, что внутри основного блока надо будет тоже поместить в отдельный див и так же абсолютно позиционировать с z-индексом 2

Первостепенно - обратиться к дизайнеру и сказать ему, какой он хороший дизайнер.
Ну а если уж макет не подразумевает сетку, зачем тогда пользовать бутстрап? Делайте без него флексами, гридами и т.п.

Обернуть в div и дать padding...Зачем тут псевдоэлементы

Как уже написали в комментариях, может помочь установка свойства
line-height: 1;
Можно попробовать значения меньше единицы, например 0.5 и т.д.
На gridlover.net - подвигайте ползунки, и отметьте кнопку GRID, чтобы увидеть сетку. Там же вы можете взять готовый CSS для вашего сайта с необходимыми правилами типографики.

т.к. строчные элементы, css между ними автоматически подставляет пробел. Его можно убрать просто указав размер шрифта в 0 для родительского элемента

figure {
  font-size: 0;
}

или использовать flexbox

figure {
  display: flex;
  flex-wrap: wrap;
}

Нужно глянуть всю верстку вообщем. Но еще есть вопрос, используешь фреймворки типа бутстрап? Если нет, то глянь что это, советую. Меньше кода будешь писать