Дима Паутов

Теги header и footer могут использоваться сколь угодно раз! Почитайте спецификацию. Это блоки призваны делать то, что говориться в их названии. Выделять шапку блока, раздела и его подвал.
Например так:

<article id="publ1">
<header>
<h1>Заголовок</h1>
</header>

<footer>
<time>21:00-12-12</time>
</footer>
</article>

<article id="publ2">
<header>
<h1>Заголовок</h1>
</header>

<footer>
<time>21:00-12-12</time>
</footer>
</article>

<article id="publ3">
<header>
<h1>Заголовок</h1>
</header>

<footer>
<time>21:00-12-12</time>
</footer>
</article>

2е. Как вы думаете, зачем вообще давать атрибут id? id явно указывает уникальность элемента на странице. Здесь дело вкуса, кто хочет, ставит id, кто хочет ставит классы. Лично я всегда ставлю атрибуты id уникальным в коде элементам.

< footer id="footer"> призван дать подушку безопасности для людей с браузерами, не поддерживающими новый стандарт.

Полнейший бред!

helephant.com/2008/07/12/using-javascript-queryselector

Засуньте весь код в функцию и передавайте в ней id формы, либо используйте querySelector.

Вот пример через функцию.

var sendForm = function(f, evt){
	  var http = new XMLHttpRequest(), 
  	f = this;

	 evt.preventDefault();
  
  http.open("POST", "/rabotay_picha.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!');    
      f.messageFF.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.messageFF.value='';
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
};

document.getElementById('feedback-form1').addEventListener('submit', function(evt){
    sendForm(this, evt);
}, false);

document.getElementById('feedback-form2').addEventListener('submit', function(evt){
    sendForm(this, evt);
}, false);

Вообще правильно так

<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="top-line">

</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="bottom-line">

</div>
</div>
</div>
</div>
</header>

Проще мне кажется понять, это глянуть на таблицы. Ибо принцип тот же

<header>
<table>
<tr>
<td>
<div class="top-line">

</div>
</td>
</tr>
<tr>
<td>
<div class="bottom-line">

</div>
</td>
</tr>
</table>
</header>

Но использовав 1й пример, то для вложенных в блок .top-line или .bottom-line строк нужно писать так:

<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="top-line">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="bottom-line">
<div class="top-line">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>

Нет смысла еще раз вложенный контент оборачивать в блок .container

www.cssfontstack.com
Если там нет вашего шрифта, значит аналоги этого шрифта по умолчанию есть не везде, а значит вам придется его подключать!