Сергей delphinpro

размер отступа между кнопками, должен зависеть не только от ширина браузера, но и от размеров самих кнопок

ну если кнопки будут зависеть от ширины окна, то и отступы будут так же зависеть от кнопок, как и от ширины окна

.block {
  --btn-width: 10vw;
  --gap: 1.25vw;
  background: red;
  padding: var(--gap);
  display: inline-flex;
  box-sizing: border-box;
  gap: var(--gap);
}


button {
    width: var(--btn-width);
    height: var(--btn-width);
    margin: 0;
    flex-shrink: 0;
}

маску наложить на картинку и все.
можно по старинке - прозрачная пнг
можно нормально сделать - svg/css маски
https://developer.mozilla.org/en-US/docs/Web/CSS/mask
Основные принципы маскирования в CSS

a b b a
a b b a
a b b a
a b b a
c c d d

2fr 1fr 1fr 2fr

.avatar {
	position: relative;
	width: 150px;
	height: 150px;
-	border-radius: 50%;
-	overflow: hidden;
+	clip-path: circle(50%);
}

.mytable:not(#table_1):not(#table_2) {
  /* Таблица с классом .mytable, но не имеющая идентификаторов #table_1 и #table_2 */
}

.mytable:not([id]) {
  /* Таблица с классом .mytable, но не имеющая никаких идентификаторов */
}

Но гораздо лучшим вариантом будет дать отдельный класс нужной таблице

.table-striped {

}

нормально решать, с использованием javascript. А таких примеров в интернете очень много.
Вкладки на CSS - это чисто академический пример возможностей языка, не более. Не стоит такие приемы применять на реальных сайтах.

Слушаем инпут. читаем что там введено. Если вдруг стерт код страны, возвращаем его обратно.
Алгоритм же простой как валенок. В чем трудность?

Вы же сами на своем скрине показали, какие элементы у вас не влезают во вьюпорт. Сделайте так, чтобы влезали, и "невидимой полосы" не будет.

Если количество блоков не определено заранее, то как во флексах сделать не выйдет.

Если количество блоков фиксировано, то сделать можно. Нужно увеличить количество колонок до общего кратного всех вариантов количеств ячеек в строках. В данном случае вам нужно НОК от двух чисел - 4 и 3. Это 12 вроде бы.

Теперь задаете сетку в 12 колонок и раскидываете по ним блоки.

.header {
  display:grid;
  grid-template-columns: 1fr min-content 1fr;
}

<header>
  <left/>
  <logo/>
  <right/>
</header>

Если нужно линию под кружки, то зачем вы кружок помещаете под линию? z-[-1] - это нужно просто убрать.

<div class="wrapper">
    <div class="navbar">    </div>
    <div class="content">    </div>
    <div class="info">    </div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 188px 1fr 326px;
  min-height: 100vh;
}

.navbar {
    /*display: inline-block;
    position: absolute;
    height: 100%;
    width: 188px;*/
    border-radius: 0px 10px 10px 0px;
    border-right: 1px solid #E8E8EF;
    background: #FFF;
    font-family: 'Inter', sans-serif;
}

.info {
    /*display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 326px;*/
    border-radius: 10px 0px 0px 10px;
    border-right: 1px solid #E8E8EF;
    background: #FFF;
}

.content
{
    /*margin-left: auto;
    margin-right: auto;
    display: inline-block; */
    background-color: #000;
}

/* закомментированное удалить. */

Установить в браузер расширение Stylus
Потом на нужной странице нажать на значок расширения и создать новый стиль для текущего сайта. Там прописать нужные стили, например (можно !important если не срабатывает)

div#column-content {
  margin-left: 0 !important;
}

сохранить стиль и наслаждаться.

Стили можно включать и выключать в любое время