The right margin on the last child (.grid > div > div:last-child) will not work. It stays flush with the container. All other margins work as intended. But the right is flush with the parent container for some reason. Many thanks.
@media (max-width: 767px) {.grid { display: inline-flex !important; overflow-x: scroll !important; overflow-y: hidden !important; width: 100% !important;}.grid > div { display: inline-flex !important; flex-wrap: nowrap !important;}.grid > div > div:not(:last-child) { display: flex !important; flex-basis: calc(100vw - 36px - 36px - 36px) !important; flex-grow: 0 !important; flex-shrink: 0 !important; margin: 36px 0 36px 36px !important;}.grid > div > div:last-child { display: flex !important; flex-basis: calc(100vw - 36px - 36px - 36px) !important; flex-grow: 0 !important; flex-shrink: 0 !important; margin: 36px !important;}}