While building the Bare Bins website I created a cool animation where the lorry moves across the screen infront of a Scottish themed skyline, I moved about with the rows on Visual Composer in order to make the lorry position itself next to the skyline and changed the z-index of the rows using Custom CSS classes to make sure the lorry appears in front of the skyline row.
Solved. Do recall, this was only occurring on the left half of the screen, and only on certain pages- whereby the #left_outer div was overlapping half of the #content -
In order for z-index to work properly, the element is supposed to be position:absolute or position:relative... thus, I had to set it accordingly.
So I added the css attribute 'position:relative;' to the Lorry row's custom css class and it solved it.