Создание адаптивного, полноразмерного шеврона с помощью CSS в Wordpress Visual Composer

Question

Я пытаюсь создать отзывчивый шеврон полной ширины внизу раздела с помощью CSS, как в this jsfiddle - в Wordpress Visual Composer.

При изменении размера окна браузера шеврон падает со страницы примерно так и не центрируется в контейнере (пример) .

Я думаю, что .vc-row необходимо расширить на всю ширину браузера, но, похоже, ничего из того, что я пробовал, не работает (установка ширины на 100vw, margin и padding на 0 с помощью !important и т. Д.).

Вот код:

HTML

<div class="vc-row-container container parent--.chevron-white">
  <div class="vc_row wpb_row vc_row-fluid chevron-white vc_custom_1525861624597 vc_row-has-fill">...

CSS (Sass)

.chevron-black, .chevron-white
  box-sizing: content-box !important
  display: block
  height: 0px
  left: 0 !important
  margin: 0px auto 0 auto
  padding: 0px !important
  position: relative
  text-align: center
  transform: translate(0%, -100%)
  width: 100% !important
  z-index: 999
  .wpb_column
    width: 100% !important
  &:after
    border-style: solid
    border-width: 50px 50px 0 50px
    bottom: -50px
    content: ""
    height: 0
    left: 0
    margin: 0px auto 0 auto
    position: absolute !important
    width: 0
.chevron-black:after
  border-color: $black transparent transparent transparent
.chevron-white:after
  border-color: $white transparent transparent transparent
.parent--.chevron-black, .parent--.chevron-white
  margin: 0 !important
  padding: 0 !important
  width: 100vw !important

Другие примечания: Я использую тему Kalium WordPress. .vc-container (оболочка визуального композитора) - это полная ширина браузера, .vc-row-container немного меньше, а .vc-row немного меньше. Поскольку я использую тему Wordpress с Visual Composer, я не могу редактировать HTML напрямую, но я могу попытаться переопределить JS и CSS.