Initial Position of an element is interfering with my clicks - pointer-events:none does nothing

I’m working on the current version of google chrome. There is a spot about half-way down the edge of where the yellow and blue buttons meet that when I click on it, it highlights the word “Strict” and does not activate the button. It is much wider than it is tall and it stretches well into my yellow and blue buttons. It is actually affecting the usability of my game. The pointer-events property does nothing to it. I know my positioning css on these elements is not the greatest… could that be screwing everything up? Help would be greatly appreciated!

Edit: Please open the code on the codepen website (by clicking in the top right where it says “Edit on Codepen”. It doesn’t seem to work properly embedded here but is functional when you open it in a separate page.

I don’t have time to get deep into the code, but I notice that when I try to select things other things are sometimes selected. Sometimes more than one thing is selected.

To be more specific, when I press some of the color pads, other color pads “move” like they’re being depressed. It seems to be whatever was depressed last. Other times it doesn’t seem to know what button I’m depressing.

There are other elements that are getting in the way of other buttons too. I think that may be what you are seeing. I’m not sure why the buttons do that after switching to a different button… I can probably fix that pretty easily because otherwise the game and all the rest of the code works as it should.

Edit: I did fix the depressed button issue. It is more aesthetically pleasing now but some of my elements are still “getting in the way” (so to speak) of the buttons. I can make an image that highlights where I’ve noticed these problems if that will help.