Text box not adhearing to z-index when deployed

I am attempting to place the headers above the various spaces in order to cut off the grey borders from the space. While it works in the preview mode, when I try deploying the website, it seems as if the text is being pushed behind every div on the page. In an attempt to solve this, I set the z-index to 100000000, however, the text box is still behind each div. If this is not a bug, and it is an error on my part I would welcome any advice on it. Thank you.

This is what is it supposed to look like, however when it is deployed, for example, the text, Engine, in the top right disappears and the grey line continues right through where Engine is supposed to be.