freeman0204

По поводу картинок: там ссылки - инлайн-блоки, и чтобы отступа не было, им надо выдать нулевой размер шрифта prntscr.com/8ka8od

А для картинок: так каждая картинка лежит же в собственном a, поэтому там является и первым, и последним потомком.

header и footer position:absolute, z-index:2
а блок position:relative, z-index:3

Смотрите z-index

Юзайте padding, я вас умоляю:

.logo a {
	color: #fff;
	padding: 6px 12px;
	background-color: #ea5a4b;
	display: inline-block;
	text-align: center;
}

добавь код

.logo a {
  line-height: 33px;
}

добавлено позже -------------------------------
Вот еще вариант, если использование свойства vertical-align- принципиально.
<a href="#"><i>i</i><span>Intent.</span></a>

a {
  display: block;
  height: 34px;
  text-decoration: none;
  float: left;
  color: black;
  font-family: Arial;
  }
i {
  font-style: normal;
	color: #fff;
	width: 34px;
  height: 34px;
	background-color: #ea5a4b;
	text-align: center;
  display: table-cell;
  vertical-align: middle;
  }
span {
  display: table-cell;
  vertical-align: middle;
  padding-left: 5px;
}

1. Выше указали плагин для Фотошопа, расставляющий сетку.
2. Вообще, я эту сетку расставлял сам за пару минут. Выставить в настройках Фотошопа сетку (настройки этой сетки Edit - Preferences - Guides, grid and slices, а сама сетка включается по Ctrl +') по 8рх (это значение для удобства, ну и просто я люблю делать именно так под 960; можно посчитать другие значения исходя из целей) и делишь направляющими на нужное количество колонок (6, 8, 12 и т.п.) кратное модулю в 8рх. Потом рисуешь вертикальные полупрозрачные прямоугольники и расставляешь как надо. Все, сетка готова.
Соответственно, для другой ширины окна придется делать новый макет с новой шириной колонок (если подразумевается изменение их ширины). На моей практике для верстальщика достаточно макета под минимальную и под максимальную ширину. Дальше он сам.

Готовые не предлагать, но я на всякий случай оставлю это здесь:
3.Если лень настраивать самому, то гуглите "XXX grid psd", где ХХХ — это ширина макета и/или указание других особенностей (например, бутстрап).
Пример запроса
4. Сайты типа 960.gs на которых готовая сетка под ширину 960рх. На главной можно просто скачать готовые шаблоны с нанесенной сеткой. Собственно, по запросу в поисковике можно скачать такие же шаблоны под разную ширину макета.

Рекомендую использовать bootstrap sass. В файле _bootstrap.scss вы сможете закомментировать ненужные элементы и в скомпилированном файле получите только сетку grid. Когда вам понадобятся другие элементы, вы их просто раскомментируете и нужные элементы появятся в выходном файле. Про установку bootstrap sass.
Вносить изменения в файлы bootstrap крайне не рекомендуется. Используя sass вы можете вносить изменения в стили bootstrap через переменные, создав отдельный файл. Таким образом вы не трогаете ядро.

Добрый день. Для примера у Position есть 4 атрибута: абсолютное, относительное, статическое и фиксированное. И у всех у них разное отображение (кроме статического - оно по умолчанию у всех элементов). А маргин и паддинг это просто поля и отступы.

Зачем вам тут calc()?
добавтье к .box
margin-top: -10px

Ну или transform: translateY(-50%); используйте (если высота .box не известна)

Очевидно, задать им разные идентификаторы.

<div id="owl-one">...</div>
<div id="owl-two">...</div>

$("#owl-one").owlCarousel();
$("#owl-two").owlCarousel();

По HTML/CSS могу посоветовать поддерживаться стилей написания кода от @mdo
Сам стараюсь ориентироваться на него.
По-русски: Руководство по написанию кода от @mdo
In English: Code Guide by @mdo

Заходите в getbootstrap.com/customize
и в поле @grid-columns ставите 16.

Решал такую задачу ранее.
Вроде или в iframe width прописывал 100%
Или добавлял style="width:100%;"