Having issues with mobile version of CSS template.

Hey everybody!

After hours of tests and messing about with current CSS values, I'm left with the same problem I've had from the start.

I am building a website for myself and am having some trouble with it's mobile version. As it is a modified version of a pre-existing website template, I am a bit clueless about what might be the issue. From testing, I am assuming it either has to do with one of the following code lines I'll state below or the bootstrap files wich I find a bit overwhelming to mess with.

As you can see, the desktop version runs very smoothly between sections and I have absolutely no complaint. As for the mobile adaptation, two issues occur. For one, the color overlay (or tint) of the section seems to be absent for a hundred pixels at the top and the bottom, creating an odd and unwanted border. Also, the decorative pictures inbetween sections oddly seem to be replaced by an irrelevant or oversized version of the background image. Actually, every ''background'' pictures except from the header tiger seem to be oversized.. even textures used as section backgrounds..

I can get around some coding but am completely lost right now and am hoping somebody here could maybe help me out or give me pointers so I've included videos of both devices as well as the CSS code for the sections that seem to be problematic (at least, that part seemed to have the most impact on the mobile problem when I messed about with it).

Any help would be appreciated. Thanks!

Desktop preview: https://streamable.com/4g7m8

Mobile preview: https://streamable.com/xshfe