Евгения

.body{
display: flex;
margin: -10px;
max-width: 100vw;
overflow:scroll;
}

.column{
flex: 0 1 auto;
padding: 10px;
}
c такими стилями и без всяких медиа-запросов скролл появляется только у самого блока

у вас

.body{
display:flex;
flex-wrap:wrap; // тут у вас есть разрешение блоку переносить не уместившийся контент на вторую строку
margin: -10px;
}

.column{
flex: 0 1 auto;
padding: 10px;
}

media (max-width: 768px) {
.body{
min-width: 1176px; // в этом вообще смысла нет, потому что есть разрешение на перенос - все что не поместилось, просто пойдет во вторую строку и даст вам дурацкий не работающий скроллбар снизу
overflow:scroll;
}
}

oveflo-x: scroll / hidden на родителя можно
если hidden, то нужно будет париться с представлением больших чисел (всякие там e вставлять, вместо разрядов)
если scroll, то надо будет скроллбар прятать

tranform: skew не подойдет вам? задача не совсем понятная, но скос так делается)

Я бы скорее подумала, что это не фон, а изображение - там сверху оно перекрывает текстовый элемент. Мне кажется, что его можно абсолютно спозиционировать в блоке и пусть вылезает.

ссылка - строчный элемент со своими встроенными стилями
попробуйте дать ей display: inline-block;
но если вы собираетесь потом еще какие-то ссылки на страницу добавлять, то лучше стилизовать по классу
a class="play-now-button">play now