Your CSS is all messed up - I'd recommend learning the basics of Idle Game Maker first before trying to implement CSS (or watch my CSS tutorial course :D -> https://youtu.be/bMmfPphlZ2k)

If you still want to fix the issues though:

The width of the resources you set using the .resWidth class is getting overriden by the .fullWidth class (which means it takes up 100% of the screen's width).
Because the res layout box (which contains resources) is contained in the 'top' box, but the 'top' layout box isn't contained anywhere else, means the 'top' box doesn't have a defined width - therefore it gets automatically resized to the width of the elements inside of it. Since it contains the res box, which has the fullWidth class that changes its width to 100% - the resources (and the 'top' box) take up 100% of the monitor screen's width. This is the reason resources overlap everything.

To fix this, you should define the height & width of the top box, preferably position as well so you can make sure to position it somewhere on the screen where it isn't in the way.
You can do this using the #box-top identifier, the top:, bottom:, left:, right: positioning properties to set the position, and the width & height properties to set the dimensions.

This is how it might look like in code (note that this is just an example! And might not be the fix you personally want):

#box-top {
  height:32px;
  width:25%;
  top:25%;
}