gassmonkey

.prew-butt:hover::after{
  border-left: 19px solid  #xxxxxx;
}

Проблема решена присвоением зафиксированному блоку положительного z-index, и большего z-index всем блокам поверх него.

https://developer.mozilla.org/en-US/docs/Web/CSS/
MDN - вообще, лучший ресурс по веб.

Каждый из этих блоков может иметь уникальный дизайн, и таким образом можно изменить определённый блок, не трогая остальные.
Твой подход уместен, только если все блоки идентичны, и проект на имеет дизайна.

vertical-align: top;
Инлайн блоки по дефолту выравниваются по нижней границе.

https://www.browsersync.io/

Попробуй один раз, и про LiveReload дополнения для браузеров забудешь раз и на всегда.

Очевидно, обернуть container в ещё один блок, и задать цвет фона ему.

<div class="wrap">
      <div class="container"></div>
</div>

.wrap{
  background: black;
}

codepen.io/anon/pen/xZPwKz

Гугли "безопасные шрифты"
Гельветика, кстати, таким не является. Она присутствует только на маках.