Павел

В css такое и не будет работать. Задавайте сами путь в ручную, чаще всего так:
background-image: url("../media/third.jpg");
Т.е. путь будет на папку выше

$("div'").click(function() {
$('#inner').wrapInner('<a href="link" />');
});

По идее должно сработать:

.sidebar {
  width: 265px;
  height: 100vh;
  float: right;
  background: #8b5d79;

}

https://habr.com/post/201752/
habrahabr.ru/search/?q=phonegap

Как искали то если даже дополнения для этого есть?

Svg + css
В файле main.css смотрите по поиску: data-aos

Bootrastrap 3:
В Css:

.col-xs-5bl,
.col-sm-5bl,
.col-md-5bl,
.col-lg-5bl {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5bl {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5bl {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5bl {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5bl {
        width: 20%;
        float: left;
    }  
}

Html:

<div class="col-xs-5bl"></div>
<div class="col-xs-5bl"></div>
<div class="col-xs-5bl"></div>
<div class="col-xs-5bl"></div>
<div class="col-xs-5bl"></div>

И также добавляете классы бутстрапа если надо по колонкам

Bootstrap 4:

<div class="row">
   <div class="col">
      1
   </div>
   <div class="col">
     2
   </div>
   <div class="col">
      3
   </div>
   <div class="col">
      4
   </div>
   <div class="col">
      5
   </div>
</div>

Виджет фейсбука может быть любого размера.
Читайте описание виджета: https://developers.facebook.com/docs/plugins/embed...
Оставьте поле размера пустым, чтобы ширина была гибкой.

Скорее всего к main применяются какие то свои стили, попробуйте другой класс задать

Посмотрите в панель разработчика на предмет ошибок и применение стилей

Добавьте в свой конфиг:
"trim_trailing_white_space_on_save": true

Также есть разные плагины по этой тематике, пример: https://github.com/SublimeText/TrailingSpaces

По сути, как я это вижу, если нужна адаптиновать и везде чтобы было одинаково, то для ПК верстаете как обычно. для смартфонов выводите только машину с точками, при нажатии на точку выводится всплывающее окно, иного варианта тут врятле видно

При любом разрешении, используя toggle device toolbar, такого вида как у вас на картинке нет.

Насколько знаю такого нет.
Когда делаю подобное, то делаю только условия показа только для мобильных и планшетов. А если делаю для ПК, то хрени не произойдет, просто будет ошибка что нечем открыть ссылку...

Нет такой функции и доп. софта.

Что то вроде такого (jquery):

if (location.href.indexOf('/en/') > -1) {
    $("body").addClass("eng-lang");
}

Js:

url = window.location.href;
if( url.match(/en/) ) {
   alert("eng-lang");
}

Смотрим в Css, и ничего сложного не видим...

.btn{background-image:url(../img/btn.png);background-position:0 0;width:478px;height:152px;display:inline-block;position:absolute;top:160px;left:0;font-size:20px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.53);text-align:center;line-height:150px}.btn:before{content:'';position:absolute;top:50px;right:40px;bottom:50px;left:40px;border:6px solid transparent;border-radius:50px;-webkit-animation-duration:1s;animation-duration:1s}.btn:hover:before,.btn:focus:before,.btn:active:before{-webkit-animation-name:hvr-ripple-out;animation-name:hvr-ripple-out}@-webkit-keyframes hvr-ripple-out{100%{border-color:#ccc;top:-12px;right:-12px;bottom:-12px;left:-12px;opacity:0}}@keyframes hvr-ripple-out{100%{border-color:#ccc;top:-12px;right:-12px;bottom:-12px;left:-12px;opacity:0}}