Sergey Semenov

Причина простая, чем больше проект тем больше времени и ресурсов($) нужно на такие вещи как ре-дизайн, адаптацию и т.д.
Например адаптация под IE8/9 не много сложно делать, аудитория VK например на эти браузеры по моему 1%( могу ошибаться) а это 1 ххх ххх пользователей. Вот и получается сложности. Кому то проще делать моб. версии сервисов, дабы не будоражить весь проект.

html
<a href="#">li<hr></a><br>
<a href="#">nk<hr></a>
css
a{
text-decoration:none;
}
.hr{
padding-top:5px;
}

Вот уроки очень классные, самое главное все понятно и просто, да и вообще у него там всего много. Рекомендую.

Учитесь обходится без bootstrap, flexbox очень удобно, понятно и просто. Как освоите верстку на флексах можно смотреть и на гриды (grid layout тоже классная вещь, но с поддержкой пока все плохо)

Вам в сторону SVG смотреть нужно. На CSS мне кажется вряд ли получится.

Ну как вариант: скачать нужный вам шрифт, положить его в папку Fonts в корневом каталоге и подключить его через стили.

А почему SVG не рассматриваете?

float: left; float: right -в данном случае спасают. Но, вся верстка рушится.
Лучше взять и сделать все на fLexbox по возможности или найти готовую сетку и подогнать под себя.

width:23%;
так не правильно, но поможет в данном случае.

Вот так, подойдет?

.box1 {
  width: 650px;
  height: 316px;
  margin: 50px auto;
  border: 1px solid black;
}

.image, .description {
  height: 100%; 
}

.image {
  width: 50%;
  border: 1px solid blue;
  float:left;
}

.description {
  width: 50%;
  border: 1px solid orange;
  float:right;
}

Gulp-Browser Sync-

Если нужны бесплатные фото стоки вот здесь большой список.