Сергей delphinpro

https://jsfiddle.net/5pL0sukt/24/
https://jsfiddle.net/5pL0sukt/25/

Следует уточнить версию бутстрапа.
В последней другие классы xs — getbootstrap.com/docs/4.0/layout/grid/#grid-options

Вычислите ширину полосы прокрутки и вместе с оверфлоу добавляйте такой же марджин справа.

Как вычислить джавасриптом ширину скроллбара гугл подскажет.

jsfiddle.net/cqb73h0u/1

Вот так

ol#politika, ol#politika ol {
  list-style: none; 
  counter-reset: li; 
}
ol#politika li:before {
  counter-increment: li; 
  content: counters(li,".") ". "; 
}

.main-menu {
    $this: &;
    display: none;
    &--open {
        display: block;
        #{$this}__link {  }
    }
}

Но я предпочитаю такой вариант:

.main-menu {
    display: none;
    &--open { display: block; }
    &--open &__link {  }
}

function prov(id_knopki){
  return jQuery.ajax({ // Будем возвращать deferred-объект
    type: "POST",
    url: "prov_prav_polz.php",   
    dataType:"text",
    data:{"id_knopki":id_knopki},
    cache: false,  
    // async:false, // это плохо, выкидываем
	// эти коллбеки тоже убериаем
    // success:function(response){
    //   alert(response);
    //   var result_add = response; 
    //   if(result_add=="1") { alert("Операция разрешена"); } else { alert("Операция запрещена"); }
    // },
    // error:function(xhr, ajaxOptions, thrownError){
    //   alert(thrownError); alert("Ошибка выполнения скрипта");
    // }
  })
  // Вместо коллбеков будем использовать функциональность deferred объектов
  .done(function(response){
    alert(response);
    var result_add = response; 
    if(result_add=="1") { alert("Операция разрешена"); } else { alert("Операция запрещена"); }
	return response; // Прокинем данные дальше, наружу
  })
  .fail(function(xhr, ajaxOptions, thrownError){
    alert(thrownError); alert("Ошибка выполнения скрипта");
  })
  ;
  // return result_add; // неправильно
}

$("#formsubmit").click(function() {
  var id_knopki = 100;
  prov(id_knopki)
    .done(function(response){
      if(response=="1") {  } else {  }
    });
});

как-то так оно вроде должно работать... я уж не помню насколько там deferred от промисов отличается.

$.when(prov(id_knopki)).done(function() {
if(result_add=="1") { ... } else { ... }
});

Чтобы это работало, функция должна возвращать тот самый deferred объект:
return $.ajax({...})

Фиксированная таблица распределяет ячейки равномерно, как space-between во флексах.
Отсюда и пляшите

.progress
  .cell

.progress { display: table; table-layout: fixed; width: 100%; }
.cell { display: table-cell; }

Возможно придется добавить обертку для table-row
Ячейки релатив, или внутри доп. контейнер с релатив.
Точки добавить внутрь, раскидать обсолютом по границам ячеек.

закон старый уже. насколько я помню, там не обо всех куках сказано. Служебные печеньки, необходимые для работы сайта вы можете писать не спрашивая разрешения и вне зависимости от согласия пользователя. Т.е. кука о том что пользователь запретил ставить куки является служебной и ее можно писать в любом случае. А разрешение вы спрашиваете на запись каких-то кук имеющих отношение с персональным данным или типа того, или рекламным, или еще каким-то для отслеживания пользователя (в т.ч. партнерская таргетированная реклама, плагины соц-сетей и т.п.). Главным образом закон нацелен на соблюдение приватности юзера.

которые почему-то меняют свой адресс в зависимости от url. Не понимаю что у меня не так.

Всё у вас так.
Пути решения два
1. Указывать пути к статике от корня веб-сервера:

<link href="/design/css/main.css">
<img src="/design/images/logo.png">

2. Использовать тег <base>

<base href="http://my-super-site.ru/">
<link href="design/css/main.css">
<img src="design/images/logo.png">

.container-fluid
  .table-responsive
    table.table

.container-fluid — это чтобы дать возможность пользователям с большими мониторами нормально просматривать таблицу
.table-responsive — этот стиль завернёт таблицу в скроллящийся контейнер. Для больших моников страховка, для маленьких необходимость
ну а внутри сама таблица.

Для мобильных устройств нужно будет пересмотреть вид отображения таблицы. Либо оставить скролл-контейнер. Методы адаптации таблиц под мобильники уже сто раз описаны, ничего нового за последние годы не придумали. Гуглить по запросу css responsive table

Я писал собственное решение, это не сложно, в принципе.
Но есть и готовые jQuery плагины, например этот — 352media.github.io/flexMenu

В частных случаях можно обойтись без javascript.
Под частными случаями я подразумеваю меню, которое не будет часто изменяться, а при изменениях всегда есть возможность привлечь верстальщика для правок.
Суть проста — хардкодим медиазапросами.

Структура примерно такая

<ul>
  <li class="more">...</li>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

.more изначально скрыт, при уменьшении ширины ставим брикпойнт, показываем .more абсолютом в конце меню, и также абсолютами позиционируем последние не помещающиеся пункты в столбик.
Эти пункты делаем скрытми и показываем их правилом ul:hover > li { display: block}
При большем уменьшении ширины, всё больше пунктов позиционируем в столбик.

Да, это не по феншую. Зато просто и работает. В определённых случаях может быть простым и быстрым решением проблемы.

MDN — наше всё!
CSS Keyword index

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

UPD: Пример второго варианта https://codepen.io/delphinpro/pen/LrYbKb

Как-то так, наверное https://jsfiddle.net/dLv2sebx/

Может просто перемешать массив чисел?

function shuffle( array ) {
  for(var j, x, i = array.length; i; j = parseInt(Math.random() * i), x = array[--i], array[i] = array[j], array[j] = x);
    return true;
}

var a = [1,2,3,4,5,6,7,8,9];

shuffle(a);

out.innerHTML = a.toString();

https://jsfiddle.net/uhhqben9/

UPDATE:

Все просто — функция перемешивает массив чисел.

Вот ваша функция:

function getRandom(min, max) {
  var arr = [];
  for (var i = 0; i < max; i++) {
    x = Math.floor(Math.random() * (max - min + 1)) + min;
    if (arr.indexOf(x)) {
      return;
    }
    else {
      arr.push(x);
    }
    return arr;
  }
}

Дорабатываем ее с использованием функции shuffle:

function getRandom(min, max) {
  // Получаем массив чисел из диапазона от min до max
  var arr = Array.from(Array(max - min + 1).keys(), x => x + min);
  // Перемешиваем
  shuffle(arr);
  // возвращаем перемешанный массив
  return arr;
}

И можем использовать для получения массивов неповторяющихся случайных чисел

var a = getRandom(3,15);

https://jsfiddle.net/uhhqben9/1/

.

$arrayOfInt = array_map(function($item){
  return (int)trim($item);
}, explode(',', $DATA));

(function( ) {
})();

Вот эта конструкция называется "анонимная самовызываемая функция".

То есть, тут два действия:
Объявление анонимной функции

function( ) {
}

и сразу ее вызов
()()
Первые скобки это синтаксический приём для вызова анонимной функции. Есть и другие методы. Например
+function(){}()
Вторые скобки - это собственно вызов функции и при необходимости передача параметра (обычный вызов же)

()(jQuery) — в параметре передается jQuery

function($){} — а тут этот параметр объявлен и используется

(function($){})(jQuery) — итого, объявили анонимную функцию, и вызвали ее, передав параметром объект jQuery

Например, доллар у вас используется другой библиотекой, пусть MooTools.
Тогда вы запускаете jQuery в безконфликтном режиме

jQuery.noConflict();

Это значит, что доллар использоваться не будет, и объект будет доступен только по ссылке jQuery.

Но для удобства вы можете использовать анонимную функцию и безопасно использовать внутри неё переменную доллара

(function($){
  $('.slider').slick();
})(jQuery);

Чтобы стало совсем понятно, конструкцию можно переписать без анонимной функции

var myFunc = function($){
 // some code
}

myFunc(jQuery);

Это простой эскейпинг, экранирование спецсимволов. или недопустимых символов.
В CSS класс может начинаться только с символов "a-z, _, -"
Но в html можно писать что угодно.
Поэтому можно делать так

.\31 {}
.\@md-3

<div class="31"></div>
<div class="@md-3"></div>

К sass отношения это дело не имеет. Чистый css.

Придумайте способ позиционирования без трансформаций.