Without spending a huge amount of time converting all of the units and troubleshooting the output, it is difficult to say what your best course of action is. However, I notice that you make extensive use of px for almost all of your measurements in your css file. This is problematic because the proportions of the outcome will be radically different based upon different screen sizes.

I have been able to get much better luck with a combination of absolute units like px, and relative units like rem, and em applied judiciously. Here is a small px to em converter that may help you get started with your experimentation. Here is the official documentation for css, which may prove useful. There are also many great books on crafting efficient CSS documents, which I think you would find valuable. The one that I read many years ago was CSS in Depth by Keith Grant, but there are many excellent resources that may help you better understand and apply relative units.

Best of luck, and feel free to comment with any questions for clarification!