Александр Латышев

Решение №1: убрать подчёркивание у ссылки text-decoration: none;, но в этом случае остаётся разный отступ справа и слева от картинки до края контейнера.

Решение №2: использовать флекс - убрать :before и изменить стили так:

.carouselSimple__linkImg {
	display: flex;
	height: 100%;
  justify-content: center;
  align-items: center;
}

.carouselSimple__img {
	width: 100px;
	height: 63px;
}

Во первых: файл index.html называется так не просто так :), а потому что такая настройка по умолчанию у http-серверов (apache, nginx и др.). И менять эту настройку - это создавать себе дополнительные проблемы в будущем (например при переезде на новый сервер).

Во вторых: CSS (Cascading Style Sheets) - каскадные таблицы стилей или по другому "правила оформления внешнего вида веб-страниц". Вот как Вы бы назвали свод правил или кучу таблиц "стиль" или "стили"? Как Вы называете хранилище фильмов "фильм" или "фильмы"? Для хранения множества однотипных объектов предпочтительно использовать название во множественном числе (например стили, фильмы), если нет названия в единственном числе (гараж, амбар, хранилище, куча, всякая хрень).

В третьих: на вкус и цвет все фломастеры разные - как хотите, так и называйте. Но лучше так, чтобы название как можно точнее отражало суть содержимого. Это касается всего: и названия переменных в коде, и названия файлов, и вообще названия любых сущностей :)

У Вас кавычки потерялись

div.append('<img class="tableBanner" id="tableBanner' + calk + '"  src="">')

Используйте flex. Результат тут.

<div class="container">
  <div class="item"></div>
  <h1>Заголовок</h1>
  <div class="item"></div>
</div>

div.container{
  background-color: #334455;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1{
  flex: content;
  width: auto;
  margin: 0.5em;
}
div.item{
  flex: auto;
  background-color: #112233;
  height: 2px;
}