Dymok

Вот вам правильный ответ =)

img{
    object-fit: cover;
    width: 100px;
    height: 100px;
}

Для .btn уберите стиль flex: 0 0 100px и добавьте min-width: 100px

-webkit-tap-highlight-color: transparent;

Качаешь шрифты откуда угодно,
Конвертируешь в woff woff2
Кидаешь в проекте в папку fonts
И подключаешь их из папки

Это самый оптимальный вариант!

Похоже на tab-separated-values. Просто делите строку по переносу и по \t

Значит какой-то блок на странице не сужается (может быть картинка).
Если сразу не видно что именно вылазит за пределы body, то пропишите в css:

* {
   outline: solid red;
}

Тогда выделятся все элементы и сможете отыскать нужный элемент и исправить

Не совсем понятно, но предположу jsBin:

<form>
  <div class="form-group">
    <input type="text" name="name" class="form-control" placeholder="Your Name">
  </div>
  
  <button type="submit"><span>Submit</span></button>
</form>

* {
  box-sizing: border-box;
}

.form-group {
  position: relative;
  background: #fff;  
}

.form-control {
  width: 100%;
  height: 2.5rem;
  background: transparent;
  border: none;
}

button {
  border:none;
  background: transparent;
  position: relative;
  padding: 1rem 2rem;
}

button span {
  position: relative;
  z-index: 3;
}

button:after,
.form-group:after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
  background: linear-gradient(0deg, rgb(255, 174, 0) 0px, rgb(249, 232, 102) 100%);
  
  z-index: -1;
  -webkit-animation: animatedgradient 1s ease alternate infinite;
          animation: animatedgradient 1s ease alternate infinite;
  
  background-size: 100% 200%;
  background-position: 0 100%;
}


@-webkit-keyframes animatedgradient {
  100% {
      background-position: 0 0;
  }
}


@keyframes animatedgradient {
  100% {
    background-position: 0 0;
  }
}

app.get('/', (req, res) => {
   getPing().then(data=> res.send('<img src="screenshots/' + data + '">'));
});

SVG + 2 маски, одна пропорционально растягивается, другая непропорционально. Отрицательным margin загнать секции одна на другую.

Это чудесное изобретение гугла называется Scroll anchoring. Чтобы отключить, добавьте в CSS:

body {
  overflow-anchor: none;
}

echo file_get_contents('http://test.ru/my/');

А почему вам в Яндексе не рисуется?
у сервиса того видимо свое понимание GeoJSON RFC 7946

Хорошим тоном считается отделять сеточные блоки от всех остальных.

Блоки страницы обычно занимают всю ширину экрана и фон у них тянется на всю ширину. А контент ограничен по центру тем самым контейнером.

Если блок не тянется на всю ширину, то уже он находится в контейнере.

<div class='container'>
        <div class='header'>
        
      </div>
      </div>

Совмещать в 1 блок плохо, потому что придется для всех блоков задавать ширину, вместо того чтобы 1 раз задать в контейнере. И не получится спокойно переместить блок в другое место, или добавить другие блоки в тот же контейнер.

Dymok Потому что подгоните стили

.p-booking .booking-room-time-cards { 
padding-left: 28px;
    padding-right: 28px;
}

Что лучше: ставить Gulp на OpenServer/MAMP и там уже верстать или сначала сверстать в Gulp, а затем файлы перевести в .php формат и посадить на WP?

На самом деле без разницы, отличие будет в том, что вам нужно будет просто отслеживать в watcher не только css\js, но и плюсом добавить туда php(ну и выставить в proxy ваш локальный сервер:

gulp.task('browserSync', function () {
  browserSync.init({
      proxy: "wordpress-project",
      notify: false,
  });
});

Если не набили руку с галпом, советую сперва сверстать, а потом уже накидывать верстку на wordpress. Будет проще.
Актуальная сборка:
https://wordpressify.ru/2018/09/wordpress-sobiraem...
https://css-tricks.com/gulp-for-wordpress-initial-...